/* =================================================================
   moderno.css - Estilo moderno y responsive para SysacadWEB
   Se carga despues de SetEstilo() mediante local/headModerno.asp,
   por lo que sus reglas pisan a los estilos originales.
   ================================================================= */

/* ---------- 1. Paleta: cambiar aca los colores institucionales ---------- */
:root{
  --sa-primario:#1f4e8c;
  --sa-primario-hover:#173d6e;
  --sa-primario-suave:#e8eef7;
  --sa-fondo:#eef2f7;
  --sa-tarjeta:#ffffff;
  --sa-texto:#1e2633;
  --sa-texto-suave:#5b6577;
  --sa-borde:#d5dbe5;
  --sa-fila-alterna:#f6f8fb;
  --sa-foco:rgba(31,78,140,.25);
  --sa-radio:10px;
  --sa-fuente:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- 2. Base (aplica a todas las paginas) ---------- */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  padding:0 12px 24px;
  background:var(--sa-fondo);
  color:var(--sa-texto);
  font-family:var(--sa-fuente);
  font-size:15px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}
body, td, th, p, div, span, font, input, select, textarea, button{
  font-family:var(--sa-fuente);
}

img{max-width:100%;height:auto}

a{color:var(--sa-primario);text-decoration:none}
a:hover{text-decoration:underline}

/* Los <pre> vacios que se usan como espaciado no deben ensanchar la pagina */
pre{white-space:pre-wrap;margin:0}

/* ---------- 3. Tablas del sistema ---------- */
/* Las tablas nunca superan el ancho de la pantalla */
table{max-width:100%;border-collapse:separate}

/* Contenedor con scroll horizontal (lo agrega moderno.js a las tablas
   de primer nivel). En pantallas grandes no se nota. */
.sa-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 auto;
}

/* Titulo de las tablas (clase original de SYSACAD) */
.tituloTabla{
  background:var(--sa-primario) !important;
  color:#fff !important;
  font-weight:700;
  font-size:1rem;
  padding:10px 14px !important;
  border-radius:var(--sa-radio) var(--sa-radio) 0 0;
  text-align:left;
}
.tituloTabla a{color:#fff}

/* Texto de las tablas (clase original de SYSACAD) */
.textoTabla{
  color:var(--sa-texto) !important;
  font-size:.95rem;
  padding:6px 8px;
}

/* Encabezados de columna */
th{
  background:var(--sa-primario-suave);
  color:var(--sa-texto);
  font-weight:600;
  padding:8px 10px;
  text-align:left;
}

/* ---------- 4. Formularios ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea{
  font-size:1rem;
  padding:8px 10px;
  color:var(--sa-texto);
  background:#fff;
  border:1px solid var(--sa-borde);
  border-radius:6px;
  outline:none;
  max-width:100%;
  transition:border-color .15s,box-shadow .15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus{
  border-color:var(--sa-primario);
  box-shadow:0 0 0 3px var(--sa-foco);
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button{
  font-size:.95rem;
  font-weight:600;
  padding:9px 18px;
  color:#fff;
  background:var(--sa-primario);
  border:0;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover{background:var(--sa-primario-hover)}
input[type="submit"]:disabled,
button:disabled{opacity:.7;cursor:wait}

/* ---------- 5. Celulares ---------- */
@media (max-width:600px){
  body{padding:0 8px 16px;font-size:15px}
  .tituloTabla{font-size:.95rem;padding:9px 12px !important}
  /* Evita el zoom automatico de iOS al tocar un campo */
  input, select, textarea{font-size:16px !important}
}

/* =================================================================
   6. Pagina de login (body class="sa-login")
   ================================================================= */
body.sa-login{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:0;
}
/* Sin modo oscuro: el membrete y el pie institucionales estan
   pensados para fondo claro (texto negro, logos con fondo blanco). */
:root{color-scheme:light}

.sa-membrete,.sa-pie{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:12px 16px;
  overflow-x:auto;
}
/* Membrete y pie: texto legible y sin superposiciones */
.sa-membrete, .sa-membrete *,
.sa-pie, .sa-pie *{
  line-height:1.25 !important;
  position:static !important;
}
.sa-membrete table, .sa-pie table{margin:0 auto}

/* Membrete en celulares: letra proporcional a la pantalla */
@media (max-width:600px){
  .sa-membrete{padding:10px 8px}
  .sa-membrete h1, .sa-membrete h2, .sa-membrete font[size="6"], .sa-membrete font[size="7"],
  .sa-membrete font[size="+3"], .sa-membrete font[size="+4"]{
    font-size:1.15rem !important;
  }
  .sa-membrete h3, .sa-membrete h4, .sa-membrete font, .sa-membrete p,
  .sa-membrete td, .sa-membrete span, .sa-membrete div{
    font-size:.95rem !important;
  }
  .sa-membrete img{max-height:48px;width:auto}
  .sa-pie, .sa-pie *{font-size:.8rem !important}
}

.sa-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}

.sa-card{
  width:100%;
  max-width:380px;
  background:var(--sa-tarjeta);
  border:1px solid var(--sa-borde);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:32px 28px;
}
.sa-card h1{margin:0 0 4px;font-size:1.5rem;font-weight:700;color:var(--sa-texto)}
.sa-card .sa-sub{margin:0 0 24px;color:var(--sa-texto-suave);font-size:.95rem}

.sa-campo{margin-bottom:18px}
.sa-campo label{display:block;margin-bottom:6px;font-weight:600;font-size:.9rem;color:var(--sa-texto)}
.sa-campo input{
  width:100%;
  padding:12px 14px;
  background:var(--sa-tarjeta);
  color:var(--sa-texto);
}
.sa-campo input:focus{box-shadow:0 0 0 4px var(--sa-foco)}

.sa-input-wrap{position:relative}
.sa-input-wrap input{padding-right:84px}
.sa-ver{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent !important;
  color:var(--sa-primario) !important;
  font-size:.85rem;
  padding:6px 10px;
}
.sa-ver:hover{background:var(--sa-foco) !important}

.sa-btn{
  width:100%;
  padding:13px !important;
  margin-top:6px;
  font-size:1rem !important;
  font-weight:700;
  border-radius:8px !important;
}

.sa-olvido{margin:18px 0 0;text-align:center;font-size:.9rem}
.sa-olvido a{color:var(--sa-primario);font-weight:600}

@media (max-width:420px){
  .sa-card{padding:24px 18px;border-radius:10px}
  .sa-main{padding:16px 12px;align-items:flex-start}
}