/* ==========================================================================
   KRUDAMIX — panel de administración y zona del usuario.
   Se carga DESPUÉS de styles.css y usa sus mismos tokens: negro, un acento,
   esquinas a 90°, líneas de 1px, mono para la voz de la máquina.
   ========================================================================== */

body{ padding-bottom:60px; }

.pwrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }
.pwrap--sm{ max-width:640px; }

/* ------------------------------------------------------------ barra top -- */
.ptop{
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
  margin-bottom:30px;
}
.ptop__in{
  max-width:1080px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.ptop__brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:900; letter-spacing:.14em; font-size:14px;
  text-transform:uppercase; text-decoration:none; color:var(--txt);
}
.ptop__brand i{ display:inline-flex; align-items:flex-end; gap:2px; height:15px; }
.ptop__brand i b{ width:3px; background:var(--txt); }
.ptop__brand i b:nth-child(1){ height:6px; }
.ptop__brand i b:nth-child(2){ height:11px; }
.ptop__brand i b:nth-child(3){ height:15px; background:var(--accent); }
.ptop__tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); padding:3px 7px;
}
.ptop__nav{ display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; }
.ptop__nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--dim);
  padding:7px 11px; border:1px solid transparent;
}
.ptop__nav a:hover{ color:var(--txt); border-color:var(--line-2); }
.ptop__nav a[aria-current="page"]{ color:var(--txt); border-color:var(--accent); }

/* --------------------------------------------------------------- bloques -- */
h1.ph{
  margin:0 0 6px;
  font-size:clamp(1.6rem,5vw,2.3rem); font-weight:900;
  letter-spacing:-.025em; text-transform:uppercase; line-height:1.03;
}
.psub{ margin:0 0 28px; color:var(--dim); font-size:15.5px; max-width:70ch; }

.card{
  border:1px solid var(--line);
  background:var(--bg-2);
  margin:0 0 22px;
}
.card__h{
  padding:11px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim-2);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.card__h span.n{ color:var(--accent); }
.card__b{ padding:18px 16px; }
.card__b > *:last-child{ margin-bottom:0; }

/* cifras de cabecera */
.kpis{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 22px; }
@media (min-width:660px){ .kpis{ grid-template-columns:repeat(4,1fr); } }
.kpi{ background:var(--bg-2); padding:16px; }
.kpi b{
  display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2); font-weight:400;
}
.kpi span{
  display:block; margin-top:6px;
  font-size:28px; font-weight:900; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.kpi.is-hot span{ color:var(--alerta); }

/* ---------------------------------------------------------------- tablas -- */
.tw{ overflow-x:auto; }
table.tbl{ border-collapse:collapse; width:100%; min-width:620px; }
.tbl th,.tbl td{
  text-align:left; padding:10px 14px;
  border-bottom:1px solid var(--line);
  font-size:14px; vertical-align:middle;
}
.tbl th{
  font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2);
  border-bottom-color:var(--line-2); white-space:nowrap;
}
.tbl td{ color:var(--dim); }
.tbl td.k{ font-family:var(--mono); font-size:12.5px; color:var(--txt); white-space:nowrap; }
.tbl td.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.tbl tbody tr:hover td{ background:var(--bg-3); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td form{ display:inline; }

.empty{
  padding:26px 16px; text-align:center;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim-2);
}

/* --------------------------------------------------------------- badges -- */
.bdg{
  display:inline-block;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--line-2); color:var(--dim);
  white-space:nowrap;
}
.bdg--activa{ color:var(--txt); border-color:var(--txt); }
.bdg--suspendida{ color:var(--accent); border-color:var(--accent); }
.bdg--revocada{ color:var(--dim-2); border-color:var(--dim-2); text-decoration:line-through; }
.bdg--admin{ background:var(--accent); color:var(--ink); border-color:var(--accent); font-weight:700; }
.bdg--pro{ color:var(--txt); border-color:var(--txt); }
.bdg--beta{ color:var(--dim); }
.bdg--caduca{ color:var(--accent); border-color:var(--accent); }

/* ------------------------------------------------------------ formulario -- */
.grid2{ display:grid; gap:14px; }
@media (min-width:620px){ .grid2{ grid-template-columns:1fr 1fr; } }

.fld{ display:block; margin:0 0 14px; }
.fld > b{
  display:block; margin-bottom:6px;
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.fld input[type=text],
.fld input[type=email],
.fld input[type=password],
.fld input[type=number],
.fld input[type=date],
.fld select,
.fld textarea{
  width:100%; min-height:46px; padding:11px 13px;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:0;
  color:var(--txt); font-family:var(--mono); font-size:15px;
  appearance:none;
}
.fld textarea{ min-height:190px; line-height:1.5; font-size:13.5px; resize:vertical; }
.fld select{
  background-image:none; /* nada de flechas de sistema con degradado */
}
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--accent); }
.fld small{ display:block; margin-top:6px; color:var(--dim-2); font-size:12.5px; font-family:var(--font); }

.btn--sm{
  min-height:38px; padding:0 14px; font-size:12px; letter-spacing:.08em;
}
.btn--danger{
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.btn--danger:hover{ background:var(--accent); color:var(--ink); }
.btn--mini{
  min-height:0; padding:4px 8px; font-size:10px; letter-spacing:.1em;
  background:transparent; color:var(--dim); border:1px solid var(--line-2);
  font-family:var(--mono); font-weight:400; text-transform:uppercase;
  cursor:pointer;
}
.btn--mini:hover{ color:var(--txt); border-color:var(--accent); background:transparent; }
.acts{ display:flex; gap:5px; flex-wrap:wrap; }

/* -------------------------------------------------------------- mensajes -- */
.msg{
  margin:0 0 22px; padding:13px 16px;
  border:1px solid var(--line-2);
  font-family:var(--mono); font-size:13px; line-height:1.5;
}
.msg--ok{ border-color:var(--txt); color:var(--txt); }
.msg--ok::before{ content:"✓ "; color:var(--accent); }
.msg--err{ border-color:var(--alerta); color:var(--alerta); }
.msg--err::before{ content:"! "; }

/* --------------------------------------------------------- clave nueva --- */
.keybox{
  border:1px solid var(--accent);
  background:var(--bg-3);
  padding:20px 16px;
  text-align:center;
  margin:0 0 18px;
}
.keybox b{
  display:block; margin-bottom:10px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim-2); font-weight:400;
}
.keybox code{
  display:block;
  font-family:var(--mono); font-size:clamp(15px,4.2vw,22px);
  letter-spacing:.06em; color:var(--txt);
  word-break:break-all;
  background:none; border:0; padding:0;
}

/* ------------------------------------------------------------ el usuario -- */
.lic{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  margin:0 0 22px;
}
@media (min-width:620px){ .lic{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .lic{ grid-template-columns:repeat(4,1fr); } }
.lic div{ background:var(--bg-2); padding:15px 16px; }
.lic dt{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2);
}
.lic dd{ margin:6px 0 0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.lic dd.mono{ font-family:var(--mono); font-size:14px; font-weight:400; word-break:break-all; }
.lic dd.hot{ color:var(--alerta); }

.dl{
  border:1px solid var(--line-2);
  background:var(--bg-2);
  padding:20px 16px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin:0 0 22px;
}
.dl__t{ flex:1 1 240px; }
.dl__t b{ display:block; font-size:17px; font-weight:900; letter-spacing:-.01em; }
.dl__t span{
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim-2);
}

.pfoot{
  margin-top:38px; padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim-2);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;
}
.pfoot a{ color:var(--dim-2); }

/* --------------------------------------------------------- reportes ------ */
/* Estados de un reporte. Mismo criterio que el resto de badges: sin colores
   nuevos, solo el acento para lo que pide atención y gris para lo cerrado. */
.bdg--fallo{ color:var(--alerta); border-color:var(--alerta); }
.bdg--mejora{ color:var(--dim); border-color:var(--line-2); }
.bdg--nuevo{ color:var(--alerta); border-color:var(--alerta); }
.bdg--visto{ color:var(--txt); border-color:var(--txt); }
.bdg--arreglado{ background:var(--txt); color:var(--ink); border-color:var(--txt); }
.bdg--descartado{ color:var(--dim-2); border-color:var(--dim-2); text-decoration:line-through; }

/* Fallo o mejora. Dos opciones, siempre las dos a la vista: un desplegable
   escondería que también se pueden pedir cosas, no solo quejarse. */
.tipo{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.tipo label{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); padding:9px 13px;
  font-size:13.5px; color:var(--dim); cursor:pointer;
  transition:border-color .12s, color .12s;
}
.tipo label:hover{ border-color:var(--txt); color:var(--txt); }
.tipo input{ accent-color:var(--accent); margin:0; }
.tipo label:has(input:checked){ border-color:var(--accent); color:var(--txt); }

/* El detalle de un reporte en el panel: texto tal cual lo escribió su autor,
   respetando saltos de línea, sin que una URL larga rompa la caja. */
.rep__txt{
  white-space:pre-wrap; overflow-wrap:anywhere;
  border-left:2px solid var(--line-2); padding:2px 0 2px 14px;
  margin:10px 0 0; color:var(--dim); font-size:14px; line-height:1.6;
}
.rep__meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--dim-2); margin:8px 0 0;
}
.rep__meta a{ color:var(--dim); }

/* Filtros de la lista de reportes. Lo mismo que las pestañas de arriba pero un
   escalón por debajo en la jerarquía: son un filtro, no una sección. */
.filtros{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; }
.filtros a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  padding:6px 11px; border:1px solid var(--line-2); color:var(--dim);
}
.filtros a:hover{ color:var(--txt); border-color:var(--txt); }
.filtros a.is-on{ color:var(--ink); background:var(--accent); border-color:var(--accent); }

/* Un <a> que parece botón pequeño: mismos píxeles que .btn--mini, que está
   pensado para <button> y sin esto se descuadra media línea. */
a.btn--mini{ display:inline-block; text-decoration:none; line-height:1.5; }

/* Lo que pide atención. Ya existía para las fechas de caducidad; aquí se
   generaliza porque en reportes marca al tester que no ha abierto nunca. */
.hot{ color:var(--alerta); }

/* --------------------------------------------------------------- embudo -- */
/* Cuatro pasos, misma escala, para que la caída entre uno y otro se vea de un
   vistazo. Las barras son las mismas del panel de telemetría de la portada:
   una línea llena, sin degradados ni redondeos. */
.embudo{ display:grid; gap:16px; }
.paso__cab{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:0 0 6px;
}
.paso__cab b{ font-size:14px; color:var(--txt); font-weight:700; }
.paso__cab span{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.paso__barra{ height:6px; background:var(--bg-3); overflow:hidden; }
.paso__barra i{ display:block; height:100%; background:var(--txt); }
.paso:last-child .paso__barra i{ background:var(--accent); }
.paso small{
  display:block; margin:6px 0 0;
  font-size:12px; color:var(--dim-2);
}

/* --------------------------------------------------------- entrar -------- */
/* El botón de Google.
   Lleva el logotipo oficial en SVG y fondo claro a propósito: Google pide que
   su marca se vea reconocible, y además es lo que la gente tiene fichado como
   «esto es entrar con Google». Es el único sitio de todo el sitio donde entra
   un color que no es el nuestro, y está justificado. */
.btn--google{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  width:100%;
  background:#FFFFFF; color:#1F1F1F;
  border:1px solid #FFFFFF;
  text-decoration:none;
}
.btn--google:hover{ background:#E8E8E8; border-color:#E8E8E8; color:#1F1F1F; }
.btn--google svg{ flex:0 0 auto; }

/* La letra pequeña de debajo del botón: qué se pide y qué no. Quien va a
   entregar su cuenta de Google tiene derecho a leerlo ANTES de pulsar. */
.fine--auth{
  margin:12px 0 0;
  font-size:12.5px; line-height:1.55; color:var(--dim-2);
}

/* El «o con tu clave» entre las dos formas de entrar. */
.osep{
  display:flex; align-items:center; gap:14px;
  margin:26px 0 18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim-2);
}
.osep::before,
.osep::after{ content:""; flex:1; height:1px; background:var(--line); }

/* De dónde ha entrado, en la cabecera de la cuenta. */
.ptop__quien{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--dim-2);
  overflow:hidden; text-overflow:ellipsis; max-width:34ch; white-space:nowrap;
}

/* -------------------------------------------------- textos de la portada -- */
/* Cada frase con sus dos idiomas al lado. Verlos juntos es lo que hace que no
   se te quede el inglés a medias cuando cambias el español. */
.txtgrupo{
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.txtgrupo:first-of-type{ border-top:1px solid var(--line); }
.txtgrupo__c{
  margin:0 0 3px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.txtgrupo__n{ margin:0 0 12px; font-size:13px; color:var(--dim-2); }
.txtgrupo .fld{ margin-bottom:0; }

/* ------------------------------------------------ navegación en dos pisos -- */
/* Arriba el grupo (Contenido / Licencias) y debajo lo que hay dentro.
   El panel nació siendo un gestor de licencias y le fueron creciendo cosas
   encima hasta tener ocho pestañas en fila, con «Contenido» perdida entre
   «Reportes» y «Avisar». Son dos trabajos distintos que se hacen en momentos
   distintos, y mezclarlos obliga a leerse la barra entera cada vez. */
.ptop__nav a.is-grupo{
  color:var(--txt);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}
.psub2{
  border-top:1px solid var(--line);
  background:var(--bg);
}
.psub2__in{
  max-width:1080px; margin:0 auto; padding:0 20px;
  display:flex; flex-wrap:wrap; gap:2px;
}
.psub2__in a{
  padding:11px 14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--dim-2);
  border-bottom:2px solid transparent;
}
.psub2__in a:hover{ color:var(--txt); }
.psub2__in a.is-on{ color:var(--txt); border-bottom-color:var(--accent); }

/* ------------------------------------------------------ imágenes y audio -- */
/* La librería de ficheros subidos. Cuadrícula con la vista previa: el nombre
   solo no dice nada cuando llevas veinte capturas, y elegir a ciegas es cómo
   acaba una noticia con la imagen equivocada. */
.medios{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  margin-top:22px;
}
.medio{
  margin:0; border:1px solid var(--line);
  background:var(--bg-2); overflow:hidden;
}
.medio img,
.medio video{ display:block; width:100%; height:130px; object-fit:cover; background:#000; }
.medio audio{ display:block; width:100%; margin:14px 0; padding:0 10px; box-sizing:border-box; }
.medio figcaption{ padding:10px; display:grid; gap:7px; }
/* El nombre en un campo de solo lectura: se pincha, se selecciona entero y se
   pega en la noticia o en la comparativa. Con un <span> habría que ir a mano
   con el ratón y se acaba copiando de más. */
.medio__n{
  width:100%; box-sizing:border-box;
  font-family:var(--mono); font-size:11px;
  padding:6px 8px; border:1px solid var(--line-2);
  background:var(--bg); color:var(--txt);
}
.medio__d{ font-family:var(--mono); font-size:10px; color:var(--dim-2); }

/* ------------------------------------------------------ mapa de la portada -- */
/* Los bloques van numerados y en el orden en que se bajan por la web. Antes
   esto era una lista alfabética de claves —hero_entrada, captura_2— con la que
   se podía cambiar todo sin entender nada. */
.bloque__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-right:8px;
  background:var(--accent); color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:700;
}
.previa{
  display:block; width:100%; max-height:150px; object-fit:cover;
  border:1px solid var(--line-2); background:#000;
}
.vacio{
  margin:0; padding:16px; text-align:center;
  border:1px dashed var(--line-2); color:var(--dim-2); font-size:13px;
}

/* «Sube aquí, coloca allí». Subir un fichero y que no te diga para qué sirve
   deja una pantalla que no se entiende: se sube algo y ahí se queda. */
.donde{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:14px; }
.donde li{
  display:grid; gap:4px;
  padding-left:14px; border-left:2px solid var(--line-2);
}
.donde b{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.donde span{ font-size:13.5px; line-height:1.6; color:var(--dim); }
.donde a{ color:var(--txt); text-decoration-color:var(--accent); }

/* Aviso de imagen pesada. No es un error, es un «esto va a ir lento en el
   móvil», que es donde se lee la web. */
.pesada{
  color:var(--alerta); border:1px solid var(--alerta);
  padding:1px 5px; margin-left:4px; font-weight:400; cursor:help;
}

/* La fecha de los ficheros subidos, en el pie del panel. No es adorno: cuando
   algo «no aparece», lo primero que hay que descartar es que el fichero que lo
   trae no haya llegado al servidor. */
.pfoot__v{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--dim-2); cursor:help;
}

/* Cada idioma con su fichero y su vista previa, uno debajo del otro. Verlos
   juntos es lo que evita poner el banner en español y olvidarse del inglés. */
.pareja + .pareja{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }