/* ==========================================================================
   SISTEMA VISUAL DAMASCO
   Hoja base para estandarizar las aplicaciones internas.

   Uso:
     <link rel="stylesheet" href="marca-damasco/damasco.css">
     <link rel="stylesheet" href="mi-app.css">     <- lo propio de cada app

   Funciona en tema claro y oscuro segun la configuracion del equipo, sin
   necesidad de hacer nada.

   Segun el manual de marca:
     Pantone 185 C    #E1052D   rojo principal
     Pantone 186 C    #B01830   rojo oscuro
     Pantone Black 6C #000000
     Tipografia       Poppins

   El logo va BLANCO sobre fondo rojo y NEGRO sobre fondo claro.
   El manual prohibe el logo rojo sobre blanco.
   ========================================================================== */

/* ------------------------------ Tipografia -------------------------------- */
/* Se sirve desde el propio servidor: no depende de internet ni de Google. */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fuentes/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fuentes/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fuentes/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fuentes/poppins-700.woff2') format('woff2');
}

/* -------------------------------- Colores --------------------------------- */

:root {
  color-scheme: light dark;

  /* Marca */
  --marca:         #E1052D;   /* Pantone 185 C */
  --marca-oscuro:  #B01830;   /* Pantone 186 C */
  --marca-negro:   #000000;   /* Pantone Black 6C */

  /*
   * El rojo de marca se reserva para la identidad y las acciones principales.
   * Los estados de error usan un rojo distinto, para que un mensaje de fallo
   * no se confunda con un boton de la marca.
   */
  --acento:        #C10426;
  --acento-vivo:   #E1052D;
  --acento-suave:  #FDEEF1;
  --acento-borde:  #F4C2CC;

  --fondo:      #F4F5F7;
  --panel:      #FFFFFF;
  --panel-alt:  #FAFAFB;
  --borde:      #E4E6EA;
  --borde-recio:#C9CDD4;

  --texto:      #0F1114;
  --texto-medio:#4A5058;
  --tenue:      #7B828C;

  --ok:         #0F6B39;
  --ok-fondo:   #E4F6EB;
  --ok-borde:   #B6E3C8;
  --mal:        #9A1C1C;
  --mal-fondo:  #FBEAEA;
  --mal-borde:  #EEC5C5;
  --aviso:      #8A5A00;
  --aviso-fondo:#FDF3E0;

  --sombra-1: 0 1px 2px rgba(15, 17, 20, .05);
  --sombra-2: 0 2px 8px rgba(15, 17, 20, .08);
  --sombra-3: 0 12px 34px rgba(15, 17, 20, .16);

  --radio:    10px;
  --radio-sm: 7px;

  --fuente: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --acento:       #FF4D6A;
    --acento-vivo:  #FF7086;
    --acento-suave: #2A1218;
    --acento-borde: #5C2430;

    --fondo:      #101215;
    --panel:      #191C20;
    --panel-alt:  #202429;
    --borde:      #2C3137;
    --borde-recio:#3D444C;

    --texto:      #ECEEF1;
    --texto-medio:#B5BBC3;
    --tenue:      #868D96;

    --ok:         #5FD08D;
    --ok-fondo:   #12301F;
    --ok-borde:   #1F5537;
    --mal:        #FF8A8A;
    --mal-fondo:  #341818;
    --mal-borde:  #5C2626;
    --aviso:      #E8B860;
    --aviso-fondo:#33270F;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 2px 10px rgba(0, 0, 0, .35);
    --sombra-3: 0 14px 40px rgba(0, 0, 0, .55);
  }
}

/* --------------------------------- Base ----------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 var(--fuente);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }

/* ------------------------------ Utilidades -------------------------------- */

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.oculto, .oculta { display: none !important; }
.tenue { color: var(--tenue); }

/* Visible solo para lectores de pantalla. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------- Cabecera --------------------------------- */

.cabecera {
  background: linear-gradient(180deg, var(--marca) 0%, var(--marca-oscuro) 100%);
  color: #fff;
  box-shadow: var(--sombra-2);
}
@media (prefers-color-scheme: dark) {
  .cabecera { background: linear-gradient(180deg, var(--marca-oscuro) 0%, #7E1122 100%); }
}

.cabecera-fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px;
}
.cabecera h1 { margin: 0; font-size: 18px; font-weight: 600; }
.cabecera h1 + p { margin: 1px 0 0; font-size: 12.5px; opacity: .78; }

/*
 * El logo blanco se apoya en la banda roja. Sobre fondo claro va el negro:
 * el manual prohibe el logo rojo sobre blanco.
 */
.marca-bloque { display: flex; align-items: center; gap: 18px; }
.marca-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }

.sesion { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sesion-perfil {
  background: rgba(255, 255, 255, .16);
  padding: 3px 11px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}

/* -------------------------------- Pestanas -------------------------------- */

.pestanas {
  display: flex; gap: 2px; margin: 26px 0 -1px;
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  border: none; background: none; cursor: pointer; white-space: nowrap;
  padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--tenue); border-bottom: 2.5px solid transparent;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
  transition: color .12s, background .12s;
}
.pestana:hover { color: var(--texto-medio); background: var(--panel-alt); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }

/* --------------------------------- Panel ---------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  margin-bottom: 44px;
  box-shadow: var(--sombra-1);
}

.explicacion { margin: 0 0 18px; color: var(--texto-medio); font-size: 13.5px; max-width: 70ch; }

.barra-panel {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
.barra-panel .explicacion { margin: 0; flex: 1 1 320px; }

/* ------------------------------- Formularios ------------------------------ */

input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="date"], input[type="number"], select, textarea {
  padding: 10px 13px; font: inherit; font-size: 14px;
  border: 1px solid var(--borde-recio); border-radius: var(--radio-sm);
  background: var(--panel); color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a.boton:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--tenue); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--panel-alt); color: var(--tenue); cursor: not-allowed;
}

.buscador { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.buscador input[type="search"], .buscador select { flex: 1; min-width: 240px; }

.check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--texto-medio); white-space: nowrap; cursor: pointer;
}
.check input { accent-color: var(--acento); width: 16px; height: 16px; }

/* Bloque de filtros sobre fondo suave. */
.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 16px; background: var(--panel-alt);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.filtros label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tenue);
}
.filtros input, .filtros select { font-size: 13.5px; padding: 8px 11px; }

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

.aviso { min-height: 20px; margin: 14px 0 0; font-size: 13.5px; color: var(--tenue); }
.aviso.error { color: var(--mal); font-weight: 500; }
.aviso:empty { min-height: 0; margin: 0; }

/* --------------------------------- Botones -------------------------------- */

.boton {
  display: inline-block; text-align: center; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde-recio); background: var(--panel); color: var(--texto);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.boton:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.boton.primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
  box-shadow: var(--sombra-1);
}
.boton.primario:hover { background: var(--acento-vivo); border-color: var(--acento-vivo); color: #fff; }
.boton:disabled, .boton[disabled] { opacity: .5; pointer-events: none; }

.boton-texto {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--acento);
  border-radius: 4px;
}
.boton-texto:hover { text-decoration: underline; }
.boton-texto.peligro { color: var(--mal); }
.cabecera .boton-texto { color: #fff; opacity: .8; font-weight: 500; }
.cabecera .boton-texto:hover { opacity: 1; }

/* --------------------------------- Sellos --------------------------------- */

.sello {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--panel-alt); color: var(--tenue); border: 1px solid var(--borde);
}
.sello.vigente   { background: var(--ok-fondo);  color: var(--ok);  border-color: var(--ok-borde); }
.sello.novigente { background: var(--mal-fondo); color: var(--mal); border-color: var(--mal-borde); }
.sello.invalido  { background: var(--mal-fondo); color: var(--mal); border-color: var(--mal-borde); }

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

.tabla-contenedor {
  overflow-x: auto; margin-top: 18px;
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td {
  text-align: left; padding: 11px 14px; vertical-align: middle;
  border-bottom: 1px solid var(--borde);
}
.tabla th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-alt); color: var(--tenue);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--acento-suave); }
.fila-inactiva { opacity: .55; }
.fila-fallida td { color: var(--mal); }
.celda-acciones { white-space: nowrap; text-align: right; }
.celda-acciones button + button { margin-left: 14px; }
.celda-fecha { white-space: nowrap; color: var(--tenue); font-variant-numeric: tabular-nums; }

.paginacion {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 20px; font-size: 13px; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.paginacion .boton { padding: 7px 16px; font-size: 13px; }

/* -------------------------------- Tarjetas -------------------------------- */

.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px; margin-top: 18px;
}
.tarjeta {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px; background: var(--panel);
  display: flex; flex-direction: column; box-shadow: var(--sombra-1);
  transition: border-color .12s, box-shadow .12s;
}
.tarjeta:hover { border-color: var(--acento-borde); box-shadow: var(--sombra-2); }
.tarjeta-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.tarjeta-cabecera h3 { margin: 0; font-size: 15.5px; }
.tarjeta-desc { margin: 9px 0 4px; font-size: 13px; color: var(--texto-medio); }
.tarjeta-meta { margin: 0 0 12px; font-size: 12px; color: var(--tenue); }
.tarjeta-pie {
  display: flex; gap: 16px; border-top: 1px solid var(--borde); padding-top: 14px;
}

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

.pantalla-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background:
    radial-gradient(900px 460px at 50% -8%, var(--acento-suave), transparent 72%),
    var(--fondo);
}
.caja-login {
  width: 100%; max-width: 390px; text-align: center;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 38px 34px; box-shadow: var(--sombra-3);
}
.caja-login form { text-align: left; }
.login-logo { display: block; height: 40px; width: auto; margin: 0 auto 26px; }
.caja-login h1 { margin: 0; font-size: 21px; font-weight: 600; color: var(--texto); }
.caja-login .subtitulo {
  margin: 3px 0 28px; color: var(--tenue); font-size: 13px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.caja-login label {
  display: block; margin: 0 0 6px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-medio);
}
.caja-login input { width: 100%; margin-bottom: 18px; }
.caja-login .boton { width: 100%; padding: 12px; margin-top: 4px; }
.caja-login .aviso { margin: 0 0 8px; }

/* ------------------------------- Dialogos --------------------------------- */

.capa {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 15, 22, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dialogo {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 28px;
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--sombra-3);
}
.dialogo h2 { margin: 0 0 20px; font-size: 18px; }
.dialogo-pie {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--borde);
}

.formulario label, .dialogo form label {
  display: block; margin: 0 0 6px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-medio);
}
.formulario input, .formulario select, .formulario textarea,
.dialogo form input, .dialogo form select, .dialogo form textarea {
  width: 100%; margin-bottom: 16px;
}
.dialogo form .boton { width: 100%; margin-top: 4px; }
.formulario .check { margin-bottom: 16px; }
.formulario .check input { width: auto; margin: 0; }
.formulario .explicacion { margin: 0 0 16px; }

/* ------------------------------ Impresion --------------------------------- */

@media print {
  .cabecera, .pestanas, .filtros, .paginacion, .capa { display: none !important; }
  .panel { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; }
}