/* N49 · Programa de vinilos — panel de administración.
   Manual de marca: negro #000000, blanco roto #F8F8F7, gris #818285,
   vino #820025. El vino aparece solo en la acción principal y en los sellos
   de estado; nunca como fondo de página ni como color decorativo.
   Tipografía Inter, pesos ligeros. Etiquetas de sección en versalitas
   espaciadas, sustituyendo a Sackers. */

:root {
  --tinta: #000000;
  --papel: #f8f8f7;
  --blanco: #ffffff;
  --gris: #818285;
  --vino: #820025;

  --linea: rgba(0, 0, 0, 0.12);
  --linea-fuerte: rgba(0, 0, 0, 0.28);
  --texto-suave: #3a3a3a;

  /* Tonos neutros para los sellos que no son de estado activo. */
  --verde-fondo: #e7efe6;
  --verde-tinta: #2c5c2c;
  --ambar-fondo: #f6efdf;
  --ambar-tinta: #7a5a12;
  --neutro-fondo: #eeeeee;
  --neutro-tinta: #555555;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* --- Tipografía de marca -------------------------------------------------- */

.marca { font-size: 16px; font-weight: 300; letter-spacing: 1px; }
.marca sup { font-size: 8px; }

/* Versalitas espaciadas: las etiquetas de sección del manual. */
.etiqueta, th, .eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 400;
}

h1, h2, h3 { font-weight: 400; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* --- Estructura ----------------------------------------------------------- */

.barra {
  background: var(--tinta);
  color: #fff;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.barra nav { display: flex; gap: 17px; font-size: 12px; }
.barra nav a { color: #a8a8a8; text-decoration: none; padding-bottom: 2px; }
.barra nav a:hover { color: #d8d8d8; }
.barra nav a.activo { color: #fff; border-bottom: 1px solid var(--vino); }
.barra .quien { margin-left: auto; font-size: 11.5px; color: #a8a8a8; }
.barra .quien a { color: #a8a8a8; }

.lienzo { max-width: 1180px; margin: 0 auto; padding: 22px; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
}
.cuerpo { padding: 18px 20px; }

.encabezado {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 15px;
}
.encabezado .derecha { margin-left: auto; font-size: 11.5px; color: var(--gris); }

.dos-columnas {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
}
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 18px; }
.indicador { background: var(--papel); border-radius: 6px; padding: 11px 13px; }
.indicador span { font-size: 11px; color: var(--gris); }
.indicador strong { display: block; font-size: 23px; font-weight: 300; margin-top: 3px; }

/* --- Tablas --------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; padding: 8px 10px; background: var(--papel); white-space: nowrap; }
td { padding: 10px; border-top: 1px solid var(--linea); vertical-align: middle; }
td small { display: block; color: var(--gris); font-size: 11px; margin-top: 2px; }
tbody tr:hover { background: #fbfbfa; }
.folio { font-variant-numeric: tabular-nums; color: var(--gris); }

/* --- Sellos de estado (aquí sí manda el vino) ----------------------------- */

.sello {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}
.sello.disponible { background: var(--verde-fondo); color: var(--verde-tinta); }
.sello.neutro { background: var(--neutro-fondo); color: var(--neutro-tinta); }
.sello.pendiente { background: var(--ambar-fondo); color: var(--ambar-tinta); }
.sello.ocupado { background: var(--vino); color: #fff; }

/* --- Controles ------------------------------------------------------------ */

.boton {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 5px;
  border: 1px solid var(--linea-fuerte);
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  line-height: 1.4;
}
.boton:hover { background: rgba(0, 0, 0, 0.04); }
.boton.principal {
  background: var(--vino);
  border-color: var(--vino);
  color: #fff;
}
.boton.principal:hover { background: #6b001f; }
.boton.ancho { display: block; width: 100%; text-align: center; padding: 10px; }
.boton:disabled { opacity: 0.4; cursor: default; }

label.campo { display: block; }
label.campo > .etiqueta { display: block; margin-bottom: 4px; }

input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--tinta);
  background: var(--blanco);
}
textarea { min-height: 64px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--linea-fuerte);
}

.fila-acciones { display: flex; gap: 9px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.fila-acciones .lejos { margin-left: auto; font-size: 11.5px; color: var(--gris); }

/* Acciones chicas dentro de una tabla. Sirven igual para <a> que para
   <button>, así que el botón tiene que perder su apariencia de sistema. */
.mini {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 5px;
  display: inline-block;
  text-decoration: none;
  color: var(--tinta);
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
}
.mini.p { background: var(--vino); border-color: var(--vino); color: #fff; }
.mini.p:hover { background: #6b001f; }
.mini.s { border-color: var(--linea-fuerte); }
.mini.s:hover { background: rgba(0, 0, 0, 0.04); }
.mini:disabled { opacity: 0.4; cursor: default; }

/* Filtros en forma de píldora. */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filtro {
  font-size: 11.5px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 20px;
  padding: 4px 12px;
  text-decoration: none;
  color: var(--tinta);
  white-space: nowrap;
}
.filtro:hover { background: rgba(0, 0, 0, 0.04); }
.filtro.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtro .cuenta { color: var(--gris); margin-left: 5px; }
.filtro.activo .cuenta { color: #b0b0b0; }

/* --- Avisos --------------------------------------------------------------- */

.aviso {
  background: var(--ambar-fondo);
  color: var(--ambar-tinta);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 12px;
}
.nota {
  background: #f0efec;
  border-left: 2px solid var(--tinta);
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: 12px;
}
.error {
  background: #fbeaee;
  color: #7a0021;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 12px;
}
.exito {
  background: var(--verde-fondo);
  color: var(--verde-tinta);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 12px;
}
.meta { font-size: 11px; color: var(--gris); margin-top: 6px; }
.valor { font-size: 12.5px; line-height: 1.55; margin-top: 4px; }

/* --- Barra de avance ------------------------------------------------------ */

.barra-avance {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 20px;
  height: 14px;
  overflow: hidden;
  margin-top: 10px;
}
.barra-avance.chica { height: 8px; margin-top: 4px; }
.barra-avance .relleno {
  background: var(--vino);
  height: 100%;
  border-radius: 20px;
  min-width: 2px;
}

/* Calificaciones: el vino también manda aquí. */
.estrellas-panel {
  color: var(--vino);
  font-size: 14px;
  letter-spacing: 2px;
  margin-top: 9px;
}

/* --- Bitácora ------------------------------------------------------------- */

.movimientos { font-size: 12px; line-height: 1.9; color: var(--texto-suave); }
.movimientos b { font-weight: 500; color: var(--tinta); }
.movimientos .cuando { color: var(--gris); font-variant-numeric: tabular-nums; }

/* --- Portada -------------------------------------------------------------- */

.portada {
  aspect-ratio: 1;
  border-radius: 3px;
  background: #ececea;
  width: 100%;
  object-fit: cover;
  display: block;
}
.portada-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  font-size: 11px;
  text-align: center;
  padding: 12px;
}
.miniatura { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; background: #ececea; }

/* --- Acceso --------------------------------------------------------------- */

.acceso { max-width: 430px; margin: 8vh auto; }
.acceso .cabecera { background: var(--tinta); padding: 34px 26px; text-align: center; }
.acceso .cabecera .marca { color: #fff; font-size: 30px; }
.acceso .cabecera .marca sup { font-size: 13px; }
.acceso .cabecera .lema {
  color: #8d8d8d;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 9px;
}

/* --- Paginación ----------------------------------------------------------- */

.paginacion { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 12px; }
.paginacion .lejos { margin-left: auto; color: var(--gris); font-size: 11.5px; }

@media (max-width: 900px) {
  .dos-columnas, .cols3, .cols2, .indicadores { grid-template-columns: 1fr; }
}