/* Buzón anónimo · estilos compartidos por las versiones en español e inglés.
   Paleta y tipografías de Vuh. Las fuentes están en la carpeta "fuentes", junto a este archivo. */
  /* Tipografías alojadas en tu propio servidor (carpeta "fuentes"): no se pide nada a terceros,
     algo esencial en Tor y mejor para la privacidad también en el sitio normal. */
  @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap;
               src: url('../fuentes/cinzel-latin-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap;
               src: url('../fuentes/cinzel-latin-700-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap;
               src: url('../fuentes/crimson-pro-latin-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; font-display: swap;
               src: url('../fuentes/crimson-pro-latin-600-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 400; font-display: swap;
               src: url('../fuentes/crimson-pro-latin-400-italic.woff2') format('woff2'); }
  /* Paleta y tipografías tomadas de Vuh; cámbialas aquí para igualar tu página principal */
  :root {
    --guinda:   #6B0F1A;
    --guinda-d: #450A10;
    --guinda-l: #8B1A28;
    --oro:      #D4A017;
    --oro-l:    #F0C040;
    --crema:    #FDF6E3;
    --tenue:    rgba(253,246,227,.62);
    --borde:    rgba(212,160,23,.35);
    --linea:    rgba(212,160,23,.18);
    --verde:    #a9d66d;
    --error:    #ffb3b3;
    --titulos:  'Cinzel', Georgia, serif;
    --cuerpo:   'Crimson Pro', Georgia, serif;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* El atributo hidden debe ganar siempre: sin esto, reglas como .fila { display:flex } lo anulan */
  [hidden] { display: none !important; }
  body {
    background-color: var(--guinda-d);
    background-image:
      radial-gradient(ellipse at 20% 0%, rgba(139,26,40,.6) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 100%, rgba(107,15,26,.8) 0%, transparent 60%);
    background-attachment: fixed;
    font-family: var(--cuerpo);
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--crema);
    min-height: 100vh;
  }
  :focus-visible { outline: 2px solid var(--oro-l); outline-offset: 2px; }

  header.sitio {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 32px; background: rgba(69,10,16,.88);
    border-bottom: 1px solid var(--borde); backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
  }
  .logo { font-family: var(--titulos); font-size: 1.5rem; font-weight: 700; color: var(--oro); letter-spacing: .1em; text-decoration: none; }
  .logo span { color: var(--crema); font-weight: 400; }
  header.sitio nav a { font-family: var(--titulos); font-size: .85rem; color: var(--crema); text-decoration: none; opacity: .85; }
  header.sitio nav a:hover { opacity: 1; color: var(--oro-l); }

  main { max-width: 780px; margin: 0 auto; padding: 28px 16px 80px; }
  h1 { font-family: var(--titulos); font-size: 1.35rem; color: var(--oro); font-weight: 700; margin-bottom: 6px; }
  .intro { color: var(--tenue); font-size: 1rem; margin-bottom: 22px; max-width: 62ch; }

  /* Formulario */
  .formulario { border: 1px solid var(--borde); border-radius: 10px; padding: 20px 22px; background: rgba(255,255,255,.06); margin-bottom: 30px; }
  .campo { margin-bottom: 14px; }
  .campo label { display: block; font-size: .95rem; color: var(--tenue); margin-bottom: 4px; }
  input[type="text"], textarea {
    width: 100%; background: rgba(0,0,0,.3); border: 1px solid rgba(212,160,23,.3); border-radius: 6px;
    padding: 9px 12px; color: var(--crema); font: inherit; outline: none;
  }
  input[type="text"]:focus, textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(212,160,23,.18); }
  ::placeholder { color: rgba(253,246,227,.35); }
  textarea { min-height: 120px; resize: vertical; }
  .pie-campo { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--tenue); margin-top: 4px; }
  .pie-campo .excede { color: var(--error); }
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .archivo-lbl { display: inline-block; padding: 8px 16px; border: 1px dashed rgba(212,160,23,.45); border-radius: 6px; cursor: pointer; font-size: .95rem; color: var(--tenue); }
  .archivo-lbl:hover, #imagen:focus-visible + .archivo-lbl { border-color: var(--oro); color: var(--oro-l); }
  #imagen { position: absolute; opacity: 0; width: 1px; height: 1px; }
  #vista-previa { display: none; align-items: center; gap: 10px; font-size: .9rem; color: var(--oro-l); }
  #vista-previa img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid var(--borde); }

  .btn { padding: 9px 22px; border: 0; border-radius: 6px; font-family: var(--titulos); font-size: .82rem; letter-spacing: .06em; cursor: pointer; }
  .btn-oro { background: var(--oro); color: var(--guinda-d); font-weight: 700; }
  .btn-oro:hover:not(:disabled) { background: var(--oro-l); }
  .btn-oro:disabled { opacity: .55; cursor: wait; }
  .btn-texto { background: none; border: 0; color: var(--tenue); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; padding: 0; }
  .btn-texto:hover { color: var(--oro-l); }
  .estado { min-height: 1.4em; font-size: .95rem; color: var(--error); }
  .privacidad { font-size: .85rem; color: var(--tenue); margin-top: 14px; max-width: 64ch; }

  /* Comentarios */
  .comentario { padding: 14px 0 16px; border-top: 1px solid var(--linea); }
  .comentario:last-of-type { border-bottom: 1px solid var(--linea); }
  .cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .95rem; margin-bottom: 6px; }
  .no { color: var(--oro); font-family: var(--titulos); font-size: .85rem; }
  .nombre { color: var(--oro-l); font-weight: 600; }
  .uid, .fecha { color: var(--tenue); font-size: .88rem; }
  .tuyo { color: var(--verde); font-size: .88rem; font-style: italic; }
  .acciones { margin-left: auto; display: flex; gap: 12px; }
  .cuerpo { display: flow-root; }
  .texto { overflow-wrap: anywhere; }
  .linea.verde { color: var(--verde); }
  a.ref { color: var(--oro-l); text-decoration: underline dotted; text-underline-offset: 3px; }
  a.ref:hover { text-decoration-style: solid; }
  .img-btn { float: left; margin: 2px 16px 8px 0; padding: 0; border: 1px solid var(--borde); background: rgba(0,0,0,.25); border-radius: 4px; cursor: zoom-in; line-height: 0; }
  .img-btn img { display: block; max-width: 220px; max-height: 220px; border-radius: 3px; }
  .abierta .img-btn { float: none; margin: 4px 0 12px; cursor: zoom-out; max-width: 100%; }
  .abierta .img-btn img { max-width: 100%; max-height: 80vh; }
  @media (max-width: 480px) {
    header.sitio { padding: 12px 16px; }
    .img-btn { float: none; margin-right: 0; }
  }
  .resaltado { animation: resaltar 1.6s ease-out; }
  @keyframes resaltar { from { background: rgba(240,192,64,.28); } to { background: transparent; } }
  @media (prefers-reduced-motion: reduce) { .resaltado { animation: none; background: rgba(240,192,64,.18); } }

  .vacio { padding: 36px 0; text-align: center; color: var(--tenue); font-style: italic; }
  .mas { text-align: center; margin-top: 22px; }
  .btn-borde { background: transparent; color: var(--crema); border: 1px solid var(--borde); }
  .btn-borde:hover:not(:disabled) { border-color: var(--oro); color: var(--oro-l); }

  /* Disuasión (no es seguridad): sin menú de "guardar imagen" al mantener pulsado, sin selección y sin arrastrar */
  .img-btn, .img-btn img, .mod-img, .mod-img img {
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
  }
  .img-pendiente { display: inline-block; margin: 2px 0 8px; padding: 6px 12px; border: 1px dashed var(--borde); border-radius: 6px;
    color: var(--tenue); font-size: .92rem; font-style: italic; }

  /* Panel de moderación de imágenes (solo lo ve quien abre la página con #admin) */
  #panel-mod { border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px 8px; background: rgba(0,0,0,.25); margin-bottom: 26px; }
  #panel-mod h2 { font-family: var(--titulos); font-size: 1rem; color: var(--oro); margin-bottom: 8px; }
  .mod-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; font-size: .95rem; color: var(--tenue); }
  .mod-vacio { color: var(--tenue); font-style: italic; padding-bottom: 8px; }
  .mod-item { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--linea); }
  .mod-img { flex: none; width: 120px; overflow: hidden; border-radius: 4px; border: 1px solid var(--borde); line-height: 0; background: rgba(0,0,0,.3); }
  .mod-img img { display: block; width: 100%; filter: blur(16px); }      /* borrosa hasta que pulses "Ver imagen" */
  .mod-img img.visible { filter: none; }
  .mod-item.abierta .mod-img { width: min(100%, 460px); }
  .mod-datos { min-width: 0; flex: 1 1 220px; }
  .mod-acciones { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }

  #aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100% - 32px);
    background: var(--guinda-l); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 18px; font-size: .95rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
  #aviso.visible { opacity: 1; }