/* =====================================================================
   IUSTO · app.css
   Orden del archivo:
     1. Variables de marca
     2. Base (tipografía, enlaces, foco, movimiento reducido)
     3. Marco de la app: lateral, barra superior, buscador, zona de trabajo
     4. Lateral plegable (escritorio) y menú desplegable (móvil)
     5. Barra del expediente (expbar) y barra RGPD (expbar-rgpd)
     6. Kit común "iu-" (tarjetas, botones, campos, tablas, etiquetas...)
     7. Compatibilidad: clases antiguas pasadas a la marca
        (.card, .btn, .input, .alert, .bg-soft, semáforo, mini-botones)
     8. Layout antiguo (.app, .sidebar, .nav, .topbar): pendiente de borrar
   ===================================================================== */


/* 1. VARIABLES DE MARCA ------------------------------------------------ */
:root{
  /* Colores de marca */
  --iu-azul:        #1F2A44;
  --iu-azul-hover:  #151D30;
  --iu-azul-2:      #2A3756;   /* un tono más claro, para zonas del lateral */
  --iu-ocre:        #D08A2E;   /* solo detalles: activo, foco, visto bueno */
  --iu-ocre-osc:    #8F5A17;   /* enlaces */
  --iu-marfil:      #F7F4EE;
  --iu-blanco:      #FFFFFF;

  /* Textos */
  --iu-texto:       #1F2A44;
  --iu-texto-2:     #5B6478;   /* secundario sobre fondo claro */
  --iu-texto-azul:  #C9CEDA;   /* secundario sobre fondo azul */
  --iu-texto-azul-3:#8E97AB;   /* títulos de sección del lateral */

  /* Bordes */
  --iu-borde:       #E4E0D6;
  --iu-borde-suave: #EFECE4;
  --iu-borde-campo: #D5D9E2;

  /* Estados */
  --iu-ok-fondo:    #EAF5EE;  --iu-ok-borde:  #B9DEC6;  --iu-ok-texto:  #1E5B36;
  --iu-err-fondo:   #FDECEC;  --iu-err-borde: #F3C2C2;  --iu-err-texto: #8A1F1F;
  --iu-aviso-fondo: #FBF1E3;  --iu-aviso-texto: #7A4B12;
  --iu-info-fondo:  #EEF1F6;

  /* Formas */
  --iu-radio-campo: 12px;
  --iu-radio-card:  16px;
  --iu-sombra:      0 1px 2px rgba(31,42,68,.04), 0 4px 16px rgba(31,42,68,.05);
  --iu-halo:        0 0 0 4px rgba(208,138,46,.22);

  /* Tipografías */
  --iu-font-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --iu-font-texto:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Medidas del marco */
  --iu-lateral:         272px;
  --iu-lateral-plegado: 76px;
  --iu-barra:           64px;

  /* Nombres antiguos (los usan páginas existentes): apuntan a la marca */
  --bg: var(--iu-marfil);
  --card: var(--iu-blanco);
  --text: var(--iu-texto);
  --muted: var(--iu-texto-2);
  --border: var(--iu-borde);
  --primary: var(--iu-azul);
  --primaryHover: var(--iu-azul-hover);
  --primarySoft: var(--iu-info-fondo);
  --accent: var(--iu-ocre);
  --link: var(--iu-ocre-osc);
  --font-titulo: var(--iu-font-titulo);
  --font-texto: var(--iu-font-texto);
  --sidebar: var(--iu-azul);
  --sidebar2: var(--iu-azul-2);
  --sidebarText: var(--iu-marfil);
  --radius: var(--iu-radio-card);
  --shadow: var(--iu-sombra);
  --w-sidebar: var(--iu-lateral);
}


/* 2. BASE -------------------------------------------------------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--iu-font-texto);
  font-size: 15px;
  line-height: 1.5;
  background: var(--iu-marfil);
  color: var(--iu-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--iu-font-titulo);
  font-weight: 600;
  color: var(--iu-texto);
  line-height: 1.25;
}

a{ color: var(--iu-ocre-osc); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }

small{ color: var(--iu-texto-2); }

/* Texto solo para lectores de pantalla */
.iu-sr{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Foco visible al navegar con el teclado */
:focus-visible{
  outline: 2px solid var(--iu-ocre);
  outline-offset: 2px;
}

/* Animaciones desactivadas si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* 3. MARCO DE LA APP --------------------------------------------------- */
.shell{
  display: flex;
  min-height: 100vh;
  background: var(--iu-marfil);
}

/* Lateral */
.sidebar2{
  width: var(--iu-lateral);
  flex: 0 0 var(--iu-lateral);
  background: var(--iu-azul);
  color: var(--iu-texto-azul);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 50;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: width .2s ease, flex-basis .2s ease, transform .25s ease;
}

.sb-brand{
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sb-logo-full{ display: block; height: 30px; width: auto; max-width: 100%; }
.sb-logo-simbolo{ display: none; height: 32px; width: 32px; object-fit: contain; }
.sb-brand .t1{
  color: var(--iu-marfil);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.sb-brand .t2{
  color: var(--iu-texto-azul);
  font-size: 13px;
  margin-top: 2px;
}
/* Pista discreta del modo (Expediente / RGPD) */
.sb-modo{
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(208,138,46,.55);
  color: #F2C98F;
  font-size: 12px;
  font-weight: 600;
}

/* Recuadro de usuario: en escritorio sobra (ya sale arriba); en móvil sí */
.sb-user{ display: none; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-user .name{ color: var(--iu-marfil); font-weight: 600; font-size: 14px; word-break: break-all; }
.sb-user .role{ color: var(--iu-texto-azul); font-size: 12px; text-transform: lowercase; }

.sb-nav{
  flex: 1 1 auto;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-section,
.sb-section.priv-section{
  padding: 16px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--iu-texto-azul-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--iu-texto-azul);
  font-size: 15px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.sb-item span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover{
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
  text-decoration: none;
}
.sb-item.active{
  background: rgba(255,255,255,.09);
  color: #FFFFFF;
  font-weight: 600;
}
/* Rayita ocre del elemento activo */
.sb-item.active::before{
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 4px;
  height: 24px;
  margin-top: -12px;
  border-radius: 0 4px 4px 0;
  background: var(--iu-ocre);
}
/* Enlaces que abren en pestaña nueva: flechita discreta */
.sb-item[target="_blank"]::after{
  content: "";
  margin-left: auto;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  opacity: .5;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sb-item.priv-item{ background: transparent; }
.sb-item.priv-item:hover{ background: rgba(255,255,255,.06); }
.sb-item.priv-item.active{ background: rgba(255,255,255,.09); }

.sb-icon,
.sb-item .exp-ico,
.sb-item > i{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: inherit;
  opacity: .9;
}
.sb-item > i{ text-align: center; font-size: 16px; line-height: 20px; }

.sep{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 10px 12px;
}

/* Botón plegar + pie */
.sb-pie{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 8px 12px 12px;
}
.sb-plegar{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--iu-texto-azul);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sb-plegar:hover{ background: rgba(255,255,255,.06); color: #FFFFFF; }
.sb-plegar svg{ width: 20px; height: 20px; flex: 0 0 20px; transition: transform .2s ease; }
.sb-footer{
  padding: 6px 12px 0;
  color: var(--iu-texto-azul-3);
  font-size: 12px;
}

/* Contenido */
.content2{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Barra superior */
.topbar2{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--iu-azul);
  color: var(--iu-marfil);
}
.topbar2-inner{
  min-height: var(--iu-barra);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar2-left{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar2-title{
  margin: 0;
  font-family: var(--iu-font-titulo);
  font-weight: 600;
  font-size: 22px;
  color: var(--iu-marfil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón del menú (solo móvil y tableta) */
.hamb2{
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--iu-marfil);
  cursor: pointer;
}
.hamb2:hover{ background: rgba(255,255,255,.08); }

/* Buscador global */
.tb-buscar{
  position: relative;
  flex: 0 1 380px;
  min-width: 200px;
  margin: 0;
}
.tb-buscar svg{
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--iu-texto-azul);
  pointer-events: none;
}
.tb-buscar input{
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--iu-radio-campo);
  background: rgba(255,255,255,.08);
  color: var(--iu-marfil);
  font: inherit;
  font-size: 16px;
}
.tb-buscar input::placeholder{ color: var(--iu-texto-azul); opacity: 1; }
.tb-buscar input:focus{
  outline: none;
  background: rgba(255,255,255,.12);
  border-color: rgba(247,244,238,.5);
  box-shadow: var(--iu-halo);
}

/* Usuario en la barra superior */
.userbox{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.userbox .meta{ text-align: right; line-height: 1.3; }
.userbox .meta .email{ font-size: 14px; font-weight: 500; color: var(--iu-marfil); }
.userbox .meta .role{ font-size: 12px; color: var(--iu-texto-azul); text-transform: lowercase; }
.avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--iu-marfil);
  color: var(--iu-azul);
  font-weight: 700;
  font-size: 16px;
  display: grid;
  place-items: center;
}

/* Zona de trabajo */
.main2{ flex: 1; padding: 28px; }
.container2{ max-width: 1200px; width: 100%; margin: 0 auto; }
.flash-wrap{ max-width: 1200px; width: 100%; margin: 0 auto; }
.flash-wrap:empty{ display: none; }

/* Fondo oscuro del menú desplegable */
.sb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,27,44,.55);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}


/* 4. LATERAL PLEGABLE Y MÓVIL ------------------------------------------ */

/* Escritorio: lateral plegado (solo iconos). Se guarda en el navegador. */
@media (min-width: 1024px){
  html.sb-collapsed .sidebar2{
    width: var(--iu-lateral-plegado);
    flex-basis: var(--iu-lateral-plegado);
  }
  html.sb-collapsed .sb-brand{ align-items: center; padding: 18px 8px 14px; }
  html.sb-collapsed .sb-logo-full{ display: none; }
  html.sb-collapsed .sb-logo-simbolo{ display: block; }
  html.sb-collapsed .sb-brand .t1,
  html.sb-collapsed .sb-brand .t2{ display: none; }
  html.sb-collapsed .sb-modo{ padding: 2px 6px; font-size: 10px; margin: 0; }
  html.sb-collapsed .sb-section{
    font-size: 0;
    padding: 0;
    height: 1px;
    margin: 12px 10px;
    background: rgba(255,255,255,.10);
  }
  html.sb-collapsed .sb-item{ justify-content: center; padding: 0; }
  html.sb-collapsed .sb-item span,
  html.sb-collapsed .sb-item[target="_blank"]::after{ display: none; }
  html.sb-collapsed .sb-plegar{ justify-content: center; padding: 0; }
  html.sb-collapsed .sb-plegar span{ display: none; }
  html.sb-collapsed .sb-plegar svg{ transform: rotate(180deg); }
  html.sb-collapsed .sb-footer{ display: none; }
}

/* Tableta y móvil: el lateral se convierte en menú desplegable */
@media (max-width: 1023px){
  .sidebar2{
    position: fixed;
    left: 0;
    top: 0;
    width: min(88vw, 300px);
    transform: translateX(-105%);
  }
  body.sb-open .sidebar2{ transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,.25); }
  body.sb-open .sb-overlay{ opacity: 1; pointer-events: auto; }
  .hamb2{ display: inline-grid; }
  .sb-user{ display: block; }
  .sb-plegar{ display: none; }
  .sb-item{ min-height: 48px; }
  .topbar2-inner{ padding: 8px 12px; }
  .main2{ padding: 20px; }
}

@media (max-width: 767px){
  .topbar2-inner{ flex-wrap: wrap; gap: 8px 12px; }
  .topbar2-title{ font-size: 19px; }
  .userbox .meta{ display: none; }
  .avatar{ width: 36px; height: 36px; font-size: 15px; }
  .tb-buscar{ order: 3; flex: 1 1 100%; min-width: 0; }
  .main2{ padding: 16px; }
}


/* 5. BARRA DEL EXPEDIENTE (expbar) ------------------------------------ */
.expbar{
  background: var(--iu-blanco);
  border-bottom: 1px solid var(--iu-borde);
  color: var(--iu-texto);
}
.expbar-row{
  max-width: 1256px;   /* 1200 de contenido + 28 de margen a cada lado: alinea con las tarjetas */
  margin: 0 auto;
  padding: 8px 28px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.expbar-row.secondary{
  border-top: 1px solid var(--iu-borde-suave);
  padding-top: 8px;
  padding-bottom: 8px;
}
.expbar-left{ flex: 0 0 auto; }
.expbar-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--iu-marfil);
  border: 1px solid var(--iu-borde);
  font-size: 14px;
}
.expbar-pill b{ font-variant-numeric: tabular-nums; }
.expbar-pill .muted{ color: var(--iu-texto-2); }

.expbar-nav{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.expbar-nav.start{ justify-content: flex-end; gap: 8px; }

/* Primera fila: pestañas */
.expbar-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--iu-texto-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.expbar-link:hover{ color: var(--iu-texto); background: var(--iu-marfil); text-decoration: none; }
.expbar-link.active{
  color: var(--iu-texto);
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -3px 0 var(--iu-ocre);
}
/* Segunda fila: comunicaciones como botones pequeños */
.expbar-row.secondary .expbar-link{
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--iu-borde-campo);
  border-radius: 10px;
  background: var(--iu-blanco);
  color: var(--iu-texto);
}
.expbar-row.secondary .expbar-link:hover{ background: var(--iu-marfil); }
.expbar-row.secondary .expbar-link.active{
  border-color: var(--iu-azul);
  box-shadow: var(--iu-halo);
}

.exp-ico{ width: 16px; height: 16px; flex: 0 0 auto; }

.expbar-sub{
  width: 100%;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--iu-texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* Móvil: la barra se desliza en horizontal, nada se oculta */
@media (max-width: 980px){
  .expbar-row{ padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .expbar-nav,
  .expbar-nav.start{
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .expbar-nav::-webkit-scrollbar{ display: none; }
  .expbar-link{ flex: 0 0 auto; }
}


/* 5b. BARRA DEL EXPEDIENTE RGPD (expbar-rgpd) ------------------------- */
.expbar-rgpd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px max(28px, calc((100% - 1200px) / 2));
  background: var(--iu-blanco);
  border-bottom: 1px solid var(--iu-borde);
  color: var(--iu-texto);
}
/* Localizador a la izquierda, como en la barra del expediente */
.expbar-rgpd .muted{
  order: -1;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  margin-right: 12px;
  border-radius: 999px;
  background: var(--iu-marfil);
  border: 1px solid var(--iu-borde);
  color: var(--iu-texto);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Pestañas */
.expbar-rgpd > a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--iu-texto-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.expbar-rgpd > a:hover{ color: var(--iu-texto); background: var(--iu-marfil); text-decoration: none; }
.expbar-rgpd > a.active{
  color: var(--iu-texto);
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -3px 0 var(--iu-ocre);
}
/* Fecha de informes, a la derecha */
.expbar-rgpd form{ margin-left: auto; }
.expbar-rgpd .input{
  width: auto;
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 16px;
}
.expbar-rgpd .btn{
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
}
@media (max-width: 980px){
  .expbar-rgpd{ padding: 8px 12px; }
  .expbar-rgpd .muted{ flex: 1 1 100%; height: auto; padding: 2px 0; margin: 0; background: none; border: 0; }
  .expbar-rgpd form{ margin-left: 0; flex: 1 1 100%; }
}

/* 6. KIT COMÚN "iu-" -------------------------------------------------- */

/* Tarjeta */
.iu-card{
  background: var(--iu-blanco);
  border: 1px solid var(--iu-borde);
  border-radius: var(--iu-radio-card);
  box-shadow: var(--iu-sombra);
  padding: 24px;
}
.iu-card + .iu-card{ margin-top: 20px; }
.iu-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.iu-card-title{
  margin: 0;
  font-family: var(--iu-font-titulo);
  font-weight: 600;
  font-size: 20px;
  color: var(--iu-texto);
}
.iu-card-sub{ margin: 4px 0 0; font-size: 14px; color: var(--iu-texto-2); }

/* Rejillas (dos columnas pasan a una en móvil) */
.iu-grid-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.iu-grid-3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px){ .iu-grid-3{ grid-template-columns: 1fr; } }
@media (max-width: 767px){ .iu-grid-2{ grid-template-columns: 1fr; } }

/* Botones */
.iu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--iu-azul);
  border-radius: var(--iu-radio-campo);
  background: var(--iu-azul);
  color: var(--iu-marfil);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.iu-btn:hover{ background: var(--iu-azul-hover); text-decoration: none; }
.iu-btn--sec{
  background: var(--iu-blanco);
  color: var(--iu-texto);
  border-color: var(--iu-borde-campo);
  font-weight: 500;
}
.iu-btn--sec:hover{ background: var(--iu-marfil); }
.iu-btn--sm{ min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.iu-btn[disabled], .iu-btn.is-disabled{ opacity: .5; cursor: not-allowed; }

/* Campos: etiqueta encima */
.iu-field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.iu-label{ font-size: 14px; font-weight: 600; color: var(--iu-texto); }
.iu-help{ font-size: 13px; color: var(--iu-texto-2); }
.iu-input,
.iu-select,
.iu-textarea{
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--iu-borde-campo);
  border-radius: var(--iu-radio-campo);
  background: var(--iu-blanco);
  color: var(--iu-texto);
  font: inherit;
  font-size: 16px;   /* evita el zoom en iPhone */
}
.iu-textarea{ padding: 12px 14px; min-height: 120px; line-height: 1.5; resize: vertical; }
.iu-select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='%235B6478' d='M5.5 7.5 10 12l4.5-4.5 1.5 1.5L10 15 4 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.iu-input:focus,
.iu-select:focus,
.iu-textarea:focus{
  outline: none;
  border-color: var(--iu-azul);
  box-shadow: var(--iu-halo);
}

/* Barra de filtros / acciones */
.iu-toolbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Tabla */
.iu-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iu-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.iu-table th{
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--iu-texto-2);
  border-bottom: 1px solid var(--iu-borde);
  white-space: nowrap;
}
.iu-table td{ padding: 12px; border-bottom: 1px solid var(--iu-borde-suave); vertical-align: middle; }
.iu-table tr:last-child td{ border-bottom: 0; }
.iu-table tbody tr:hover td{ background: #FBFAF6; }

/* Etiquetas de estado */
.iu-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--iu-info-fondo);
  color: var(--iu-texto);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.iu-badge--ok{ background: var(--iu-ok-fondo); color: var(--iu-ok-texto); }
.iu-badge--aviso{ background: var(--iu-aviso-fondo); color: var(--iu-aviso-texto); }
.iu-badge--err{ background: var(--iu-err-fondo); color: var(--iu-err-texto); }

/* Pestañas dentro de una página */
.iu-tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--iu-borde);
  overflow-x: auto;
  scrollbar-width: none;
}
.iu-tabs::-webkit-scrollbar{ display: none; }
.iu-tab{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--iu-texto-2);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.iu-tab:hover{ color: var(--iu-texto); text-decoration: none; }
.iu-tab.active{ color: var(--iu-texto); font-weight: 600; box-shadow: inset 0 -3px 0 var(--iu-ocre); }

/* Textos y vacíos */
.iu-muted{ color: var(--iu-texto-2); }
.iu-empty{
  padding: 32px 16px;
  text-align: center;
  color: var(--iu-texto-2);
  border: 1px dashed var(--iu-borde);
  border-radius: var(--iu-radio-card);
}


/* 7. COMPATIBILIDAD: CLASES ANTIGUAS PASADAS A LA MARCA ----------------- */

.card{
  margin-top: 14px;
  background: var(--iu-blanco);
  border: 1px solid var(--iu-borde);
  border-radius: var(--iu-radio-card);
  box-shadow: var(--iu-sombra);
  padding: 20px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--iu-borde-campo);
  border-radius: var(--iu-radio-campo);
  background: var(--iu-blanco);
  color: var(--iu-texto);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover{ background: var(--iu-marfil); text-decoration: none; }
.btn.primary{
  background: var(--iu-azul);
  border-color: var(--iu-azul);
  color: var(--iu-marfil);
  font-weight: 600;
}
.btn.primary:hover{ background: var(--iu-azul-hover); }

.input{
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  border: 1px solid var(--iu-borde-campo);
  border-radius: var(--iu-radio-campo);
  background: var(--iu-blanco);
  color: var(--iu-texto);
}
.input:focus{
  outline: none;
  border-color: var(--iu-azul);
  box-shadow: var(--iu-halo);
}
select.input{
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
  padding: 0 40px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='%235B6478' d='M5.5 7.5 10 12l4.5-4.5 1.5 1.5L10 15 4 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
textarea.input{ min-height: 110px; resize: vertical; }

/* Mensajes (se mantienen las clases ok / err) */
.alert{
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--iu-radio-campo);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
}
.alert.ok{ background: var(--iu-ok-fondo); border-color: var(--iu-ok-borde); color: var(--iu-ok-texto); }
.alert.err{ background: var(--iu-err-fondo); border-color: var(--iu-err-borde); color: var(--iu-err-texto); }

/* Logo pequeño (páginas antiguas) */
.brand-logo{ width: 34px; height: 34px; object-fit: contain; display: block; }

/* Semáforo de estado */
.estado-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--iu-borde);
  background: var(--iu-marfil);
  border-radius: 999px;
}
.estado-dot{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.18);
  cursor: pointer;
  padding: 0;
  display: inline-block;
}
.estado-dot.green{ background: #10b981; }
.estado-dot.yellow{ background: #f59e0b; }
.estado-dot.red{ background: #ef4444; }
.estado-dot.active{ outline: 3px solid rgba(31,42,68,.35); outline-offset: 2px; }
.estado-txt{ font-size: 13px; font-weight: 600; color: var(--iu-texto); margin-left: 4px; white-space: nowrap; }

/* Bloque de fondo suave (gestor) */
.bg-soft{
  background: var(--iu-marfil);
  border: 1px solid var(--iu-borde);
  border-radius: 14px;
  padding: 12px;
}
.bg-soft .lbl{ display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--iu-texto); }
.bg-soft .input, .bg-soft select, .bg-soft textarea{ background: var(--iu-blanco); }
.bg-soft-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px){ .bg-soft-grid{ grid-template-columns: 1fr; } }

/* Acciones rápidas del expediente (iconos pequeños) */
.exp-mini-actions{ display: flex; gap: 8px; align-items: center; }
.exp-mini-btn{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--iu-borde-campo);
  border-radius: 10px;
  background: var(--iu-blanco);
  color: var(--iu-texto);
  text-decoration: none;
  cursor: pointer;
}
.exp-mini-btn:hover{ background: var(--iu-marfil); text-decoration: none; }
.exp-mini-btn i{ font-size: 16px; line-height: 1; }
.exp-mini-btn.is-done{ background: var(--iu-marfil); border-color: var(--iu-borde); color: #9A9FAB; }
.exp-mini-btn.is-done:hover{ background: #F1EEE6; }


/* 8. LAYOUT ANTIGUO (.app, .sidebar, .nav, .topbar) --------------------
   layout.php ya no lo usa. Se deja por si alguna página vieja lo llama.
   Cuando confirmes que ninguna página usa estas clases, se puede borrar. */
.app{ display: grid; grid-template-columns: var(--iu-lateral) 1fr; min-height: 100vh; }
.sidebar{
  background: var(--iu-azul);
  color: var(--iu-marfil);
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brand{ display: flex; align-items: center; gap: 10px; padding: 10px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.brand .logo{ width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-weight: 700; }
.brand .title{ line-height: 1.1; }
.brand .title b{ display: block; font-size: 14px; }
.brand .title span{ font-size: 12px; opacity: .8; }
.nav{ display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.nav a{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--iu-texto-azul); }
.nav a:hover{ background: rgba(255,255,255,.06); text-decoration: none; }
.nav a.active{ background: rgba(255,255,255,.09); color: #FFFFFF; }
.nav .section{ margin-top: 14px; padding: 10px 10px 6px; font-size: 12px; font-weight: 600; color: var(--iu-texto-azul-3); }
.main{ padding: 18px; }
.topbar{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--iu-blanco); border: 1px solid var(--iu-borde);
  border-radius: var(--iu-radio-card); box-shadow: var(--iu-sombra);
}
.topbar-left{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.hamburger{ display: none; border: 1px solid var(--iu-borde); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.page-title{ margin: 0; font-size: 16px; }
.page-subtitle{ margin: 0; font-size: 12px; color: var(--iu-texto-2); }
@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ position: fixed; left: 0; top: 0; width: min(92vw, var(--iu-lateral)); transform: translateX(-110%); transition: transform .2s ease; z-index: 50; }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  .hamburger{ display: inline-block; }
  body.sidebar-open::before{ content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
}