@charset "utf-8";
/* sil/css/estilos.css */
/* CSS Document */

/* ======================================================================
   BASE (GLOBAL)
   ====================================================================== */
body{
    background-image:url(../imagenes/fondo.jpg);
    background-repeat: repeat-x;
    background-color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    margin:0;
    padding:0;
}

a{
    text-decoration:none;
    color:#2E658D;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:10px;
    float:none;
}
a:hover{ color:#cd6700; }

/* ======================================================================
   MENU (LEGACY) – GLOBAL
   ====================================================================== */
p,code,ul{ padding-bottom: 1.5em; }
li{ list-style: none; }

h1{ font: normal 1.4em Tahoma,sans-serif; font-weight:bold; }
h2{ font: bold 1em Tahoma,sans-serif; }
h3{ font: bold 1em Tahoma,sans-serif; }
h4{ font: bold 1em sans-serif; }

form,input{
    margin:0;
    padding:0;
    display:inline;
}

h1,h2,h3{
    padding-top:0px;
    color:#2E658D;
    margin-bottom:4px;
}

.clearer{ clear:both; font-size:0; }
.left{ float:left; }
.right{ float:right; }

/* ======================================================================
   CONTENEDORES PRINCIPALES (GLOBAL)
   ====================================================================== */
.outer-container{
    background:#FFFFFF;
    padding-bottom:0px;
    background: transparent; /* deja ver el fondo del body */
}

/* OJO: inner-container ya NO manda en React, pero lo dejamos por compatibilidad */
.inner-container{
    background:#FFFFFF;
    font-size:1.2em;
    margin:0 auto;
    padding:0px;
    width:950px;
    display:block;
}

/* FIX: imágenes no rompen contenedor */
.inner-container img{
    max-width:100%;
    height:auto;
}

/* ======================================================================
   BLOQUE CENTRAL (Interfaz.jsx) – GLOBAL
   ====================================================================== */
.bloque-central{
    width:100%;
}

/* ======================================================================
   MENÚ LATERAL (LOGUEADO) – GLOBAL
   (En React navigation es TD, no usamos floats)
   ====================================================================== */
.navigation{
    width:276px;
}

/* Estilo del menú logueado legacy */
.navigation h2{
    color:#ce6800;
    font: bold 0.8em Tahoma,sans-serif;
    line-height:30px;
    margin:0;
    padding-left:11px;
}

.navigation ul{
    padding-bottom:10px;
    border-top:1px solid #259086;
    margin:0;
    padding-left:0;
}

.navigation li{
    border-bottom:1px solid #B1B1B1;
}

/* MENU LOGUEADO LEGACY */
.navigation li a{
    font-size:1.1em;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    background-image:url(../imagenes/btnfondo.jpg);
    background-repeat:no-repeat;
    display:block;
    padding:8px 0 8px 5%;
    text-decoration:none;
    width:95%;
}

.navigation li a:hover{
    font-size:1.1em;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    background-image:url(../imagenes/btnfondosobre.jpg);
    background-repeat:no-repeat;
    display:block;
    padding:8px 0 8px 5%;
    text-decoration:none;
    width:95%;
}

/* ======================================================================
   CONTENT (CENTRO) – GLOBAL   (NO CAMBIAR)
   ====================================================================== */
.content{
  background:#fff;
  vertical-align:top;
  margin-top:0 !important;
  overflow-x:hidden;         /* ✅ clave: evita desplazamiento */
}

/* NO centres todas las tablas (solo las que tengan class centrar) */
.content table{
  margin-left:0;
  margin-right:0;
}
.content table.centrar{
  margin-left:auto;
  margin-right:auto;
}
.content p{
    font-size:12px;
    font-family:cursive;
}

.content_center{ background-color:#FFFFFF; }

/* ======================================================================
   UTILIDADES / CONTENIDO – GLOBAL
   ====================================================================== */
.ScrollTabla{
    overflow: visible;
    width:100%;
    height: auto;
}

fieldset{ color:#000000; }

.fieldsetGrande{ width:95%; }
.fieldsetMediano{ width:70%; }
.fieldsetPequeno{ width:50%; }
.fieldsetLogin{ width:25%; }

.etiquetaborde{
    color:#2E658D;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;
}

/* ======================================================================
   ✅ TABLAS / FORMULARIOS (LEGACY RESTAURADO)
   - aquí SOLO corregimos look (colores/pesos) al estilo viejo
   - no tocamos tu layout/content
   ====================================================================== */
.tablatitulo{
    background-color:#3e89c0;
    color:#FFFFFF;
    font-size:10px;
    font-weight:bold;
    height:20px;
    padding-top:2px;
}

.tablasubtitulo{
    background-color:#CDE3F3;
    color:#000000;
    font-size:10px;
    font-weight:bold;
    height:15px;
    padding-top:2px;
}

.formulariofila1{
    background-color:#CDE3F3;   /* ✅ como legacy */
    color:#000000;
    font-size:10px;
    font-weight:bold;           /* ✅ como legacy */
    height:15px;
    padding-top:1px;
}

.formulariofila2{
    background-color:#E9E9E9;
    color:#000000;
    font-size:10px;
    font-weight:bold;           /* ✅ como legacy */
    height:15px;
    padding-top:1px;
}

.listadofila0{
    background-color:#FFFFFF;
    color:#2E658D;
    font-size:10px;
    font-weight:bold;
    height:15px;
    padding-top:1px;
}

.listadofila1{
    background-color:#E7F0FA;
    color:#2E658D;
    font-size:10px;
    font-weight:bold;
    height:15px;
    padding-top:1px;
}

.desabilitado{ color:#999999; }

.boton{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;
}

.bienvenida{
    color:#008000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:10px;
}

.fecha{
    color:#2E658D;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:9px;
}

.mensajelectura{
    color:#008000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:16px;
}

.piepagina{
    background-color:#006699;
    font-family:fantasy;
    font-size:11px;
    font-weight:bold;
    color:#FFFFFF;
    height:40px;
    padding-top:5px;
    position:inherit;
    left:inherit;
    bottom:0px;
    width:950px;
    overflow:auto;
}

.combobox,
.textbox{
    font-size:10px;
    color:#2E658D;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    width:250px;
    min-width:250px;
}

.textboxfecha{
    font-size:10px;
    color:#2E658D;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    width:220px;
    min-width:220px;
}

.textboxlogin{
    font-size:10px;
    color:#2E658D;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    width:125px;
    min-width:125px;
}

.resultadoincorrecto{
    color:#FF0000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:10px;
}

.resultadocorrecto{
    color:#008000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:10px;
}

.camporequerido{
    color:#FF0000;
    font-weight:bold;
    font-size:10px;
}

/* ======================================================================
   FIX PÚBLICO – GLOBAL
   ====================================================================== */
.menu-publico ul{
    padding-bottom:0 !important;
    margin:0 !important;
    padding-left:0 !important;
    list-style:none;
}

.menu-publico{ background:#0B5F8A; }

.menu-publico li{
    border-bottom:1px solid rgba(255,255,255,.25) !important;
}

.menu-publico li a{
    background:none !important;
    color:#fff !important;
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:14px 16px !important;
    width:auto !important;
}

.menu-publico li a:hover{
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
}

.menu-publico li a img{
    width:22px;
    height:22px;
    display:block;
    border:0;
}

.centro-publico{
    background:#fff;
    padding:18px 20px;
}

.centro-publico h1:first-child,
.centro-publico p:first-child,
.centro-publico center:first-child{
    margin-top:0 !important;
    padding-top:0 !important;
}

/* ======================================================================
   FIX REACT – GLOBAL (Interfaz.jsx controla todo)   (NO CAMBIAR)
   ====================================================================== */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

#root{ background: transparent; }

/* ✅ wrapper fijo como legacy (NO crece) */
.app-wrapper{
  width: 100%;
  max-width: 1250px;   /* ✅ ajusta: 1200/1250/1400 según quieras */
  margin: 0 auto;
  padding: 4px 12px;   /* ✅ un poco de aire a los lados */
  background: transparent;
}

/* =========================================================
   ✅ LISTADOS: que se peguen al fieldset (cuadro negro)
   ========================================================= */

/* el fieldset ya tiene borde; solo damos padding parejo */
fieldset{
  padding: 10px 12px;   /* si ya tienes padding en otro lado, ajusta */
}

/* dentro de fieldset: la tabla ocupa TODO el ancho del cuadro */
fieldset .bloque-central td.content table[cellspacing="1"]{
  width: 100% !important;      /* ✅ se pega al cuadro */
  max-width: 100% !important;
  margin: 0 !important;        /* ✅ no centrado */
}

/* para mantener el “auto acomodo” (no fixed) */
fieldset .bloque-central td.content table[cellspacing="1"]{
  table-layout: auto !important;
}
/* ======================================================================
   FIX NIÑOS (se mantiene, pero ya queda cubierto por lo global)
   ====================================================================== */
.bloque-central td.navigation{
  width:276px !important;
  min-width:276px !important;
  max-width:276px !important;
  white-space:nowrap;
}

.bloque-central td.content{
  width:auto !important;
  vertical-align:top !important;
}

/* ======================================================================
   FIX MENÚ LOGUEADO (clMenu devuelve <a><img>... sin <li>)
   ====================================================================== */
.bloque-central td.navigation{
  width:276px !important;
  min-width:276px !important;
  max-width:276px !important;
  vertical-align:top !important;
}

.bloque-central td.navigation .navigation{
  width:276px !important;
}

.bloque-central td.navigation a{
  display:block !important;
  width:100% !important;
  line-height:0;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}

.bloque-central td.navigation a img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border:0 !important;
}

.bloque-central td.navigation a img[style*="max-height"]{
  width:100% !important;
}

/* separación botones */
.bloque-central td.navigation a{
  margin: 2px 0 !important;
}

.bloque-central td.navigation a img{
  border-bottom: 2px solid #ffffff;
}

/* bajar SOLO el logo */
.outer-container table[width="950"] tr:first-child td{
  padding-top: 10px;
}

/* ======================================================================
   FIX LOGIN PUBLICO (igual al viejo)
   ====================================================================== */
.login-publico-wrap{
  text-align:center;
}

.login-publico-wrap .fieldsetLogin{
  display:inline-block;
  width:auto !important;
  padding:0;
  margin:0 auto;
}

.login-publico-wrap table{
  width:auto !important;
}

.login-publico-wrap .formulariofila1{
  background-color:#CDE3F3 !important;
}

.login-publico-wrap table{
  border-collapse:separate;
}

.login-publico-wrap .formulariofila1{
  padding-top:2px;
  padding-bottom:2px;
}

/* ======================================================================
   INFO USUARIO (solo esta tabla) – SOLO COLORES como legacy
   NO toca tamaños
   ====================================================================== */

/* zebra blanco / celeste claro (en vez de celeste/gris) */
table.info-usuario tr.formulariofila1{ background:#ffffff !important; }
table.info-usuario tr.formulariofila2{ background:#E7F0FA !important; }

/* label verde, valor azul (como tu captura) */
table.info-usuario .bienvenida{ color:#008000 !important; } /* verde */
table.info-usuario .fecha{ color:#2E658D !important; }      /* azul */

/* título azul se mantiene, pero por si algo lo pisa */
table.info-usuario .tablatitulo{
  background-color:#3e89c0 !important;
  color:#ffffff !important;
}