/* =====================================================================
   Arissto One - tema propio
   Paleta medida del arte oficial de Arissto ONE (ia/docs/Arissto_ONE.png).
   Cromo azul marino para la navegacion, area de trabajo clara.
   Contrastes medidos, no estimados. Detalle en ia/context/MARCA-COLOR.md.
   ===================================================================== */

:root{
  /* --- Marca --------------------------------------------------------
     Naranja bermellon #FD4F01, matiz 19 grados, medido en la marca del
     logotipo (zona plana, sin suavizado). El azul marino #0A1F3B sale
     del interior de la tarjeta del arte, que es un plano solido.
     El par naranja/azul rinde 4,95:1 en los dos sentidos: es la unica
     pareja de la marca que sirve para texto normal.
     ------------------------------------------------------------------ */
  --one-marca:          #FD4F01;  /* superficies, botones, acentos */
  --one-marca-hover:    #FD5D15;  /* ACLARA, no oscurece: ver nota abajo */
  --one-marca-text:     #BE3B01;  /* naranja para TEXTO sobre claro, 5,13:1 */
  --one-marca-soft:     #FFEFE7;  /* fondos de icono y realces suaves */

  /* --- Cromo azul marino: barra superior y menu lateral ------------- */
  --one-chrome:         #0A1F3B;  /* medido: interior de la tarjeta */
  --one-chrome-alt:     #0E2745;
  --one-chrome-hover:   #153259;  /* medido: circulo del arte */
  --one-chrome-line:    #264468;  /* separador decorativo */
  --one-on-chrome:      #FFFFFF;  /* 16,51:1 */
  --one-on-chrome-mute: #A9B7CC;  /*  8,12:1 */

  /* --- Area de trabajo, clara ---------------------------------------
     Sigue clara por la misma razon de siempre, que no depende del matiz:
     la aplicacion se usa en la calle y bajo sol los reflejos lavan los
     pixeles oscuros. Los grises se enfriaron hacia el azul para que
     acompanen al cromo en vez de pelearse con el.
     ------------------------------------------------------------------ */
  --one-ink:            #111827;  /* titulares     16,55:1 */
  --one-body:           #414B5E;  /* texto corrido  8,19:1 */
  --one-muted:          #5C6675;  /* etiquetas      5,42:1 */
  --one-line:           #E4E6EA;  /* separador decorativo */
  --one-line-control:   #8C93A1;  /* borde de campo 3,09:1 */
  --one-surface:        #FFFFFF;
  --one-bg:             #F6F7F9;

  /* --- Estado (interfaz, no marca) ----------------------------------
     Con la marca en naranja hay que separarlos por MATIZ, no solo por
     luminosidad: la mora avanzada se llevo a carmesi (358 grados) y la
     temprana a ambar oliva (45 grados), lejos de los 19 de la marca.
     Los ratios son contra su propio fondo suave, que es como se pintan.
     ------------------------------------------------------------------ */
  --st-ok:      #166B41;   --st-ok-soft:    #E7F1EB;   /* al dia        5,66:1 */
  --st-warn:    #7A5B00;   --st-warn-soft:  #FCF3D8;   /* mora temprana 5,70:1 */
  --st-alert:   #A4161A;   --st-alert-soft: #F8E3E4;   /* mora avanzada 6,31:1 */

  /* Tramos de mora (informe 412): del carmesi de la alerta, aclarado para
     los tramos cortos y oscurecido para los largos. Solo barras y muestras,
     nunca texto: por eso no se miden contra un fondo. */
  --tramo-1:    #F4C4C6;
  --tramo-2:    #E99497;
  --tramo-3:    #D4565B;
  --tramo-4:    #A4161A;
  --tramo-5:    #6B0E11;

  /* --- Medidas ----------------------------------------------------- */
  --one-barra-alto:     56px;
  --one-menu-ancho:     260px;
  --one-radio:          6px;
  /* Minimo tactil. La app se usa de pie, en la calle, con una mano. */
  --one-tactil:         44px;

  /* Tipografia: Inter, servida desde el WAR (ver @font-face abajo). Segoe UI
     y la del sistema son el respaldo mientras carga o si no llega. */
  --one-fuente:         Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
   Tipografia
   Inter variable (pesos 400 a 800), solo el subconjunto latino: 47 KB que
   cubren el espanol completo. Va en resources/fonts y la sirve el propio
   sitio (font-src 'self'): sin dependencia de Google ni fuga de las IP de
   los usuarios. La URL de la fuente es una expresion "resource" que Mojarra
   resuelve al servir la hoja. OJO: Mojarra evalua TODO lo que parezca una
   expresion EL en un CSS, comentarios incluidos; una mal formada deja la
   hoja entera en blanco (respuesta 200 vacia). No escribir almohadilla y
   llave juntas fuera de la expresion real.
   --------------------------------------------------------------------- */
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/jakarta.faces.resource/inter-latin.woff2.xhtml?ln=fonts") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{ box-sizing: border-box; }

/* El atributo hidden debe ganar a cualquier display propio (flex, grid):
   sin esto, ocultar una tarjeta con .hidden desde JavaScript no hace nada. */
[hidden]{ display: none !important; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--one-bg);
  color: var(--one-body);
  font-family: var(--one-fuente);
  font-size: 15px;
  line-height: 1.5;
}

/* El tema Saga fija su propia pila en body .ui-widget (Segoe UI/Roboto): sin
   esto, los controles de PrimeFaces irian en otra fuente que el resto. */
body .ui-widget,
body .ui-widget .ui-widget,
body .ui-widget input,
body .ui-widget select,
body .ui-widget textarea,
body .ui-widget button{
  font-family: var(--one-fuente);
}

/* Cifras de ancho fijo en tablas: los importes alinean por columna. */
.ui-datatable, .one-tabla{ font-variant-numeric: tabular-nums; }

h1, h2, h3, h4{
  color: var(--one-ink);
  font-weight: 800;      /* sans de peso alto en titulares */
  margin: 0 0 .5rem;
  line-height: 1.25;
}
h1{ font-size: 1.5rem; }
h2{ font-size: 1.25rem; }
h3{ font-size: 1.05rem; }

a{ color: var(--one-marca-text); }

/* ---------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------- */

.one-barra{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--one-barra-alto);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .75rem;
  background: var(--one-chrome);
  color: var(--one-on-chrome);
  border-bottom: 1px solid var(--one-chrome-line);
  z-index: 1000;
}

.one-barra__marca{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* Logo en negativo (ia/marca/gen-logo.ps1). Se fija el alto y el ancho sale
   de la proporcion del archivo: a 36 px, "Arissto" queda como un titular. */
.one-barra__logo{
  display: block;
  height: 36px;
  width: auto;
}

.one-barra__hueco{ flex: 1 1 auto; }

.one-barra__dato{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: .78rem;
  white-space: nowrap;
}
.one-barra__dato .et{ color: var(--one-on-chrome-mute); font-size: .68rem; }
.one-barra__dato .va{ color: var(--one-on-chrome); font-weight: 700; }

/* La fecha contable no es decorativa: evita que alguien opere creyendo
   estar en otro dia. Por eso lleva el acento de marca y no se oculta. */
.one-fecha-contable .va{ color: var(--one-marca); }

.one-barra__boton{
  min-width: var(--one-tactil);
  min-height: var(--one-tactil);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--one-on-chrome);
  border-radius: var(--one-radio);
  cursor: pointer;
}
.one-barra__boton:hover{ background: var(--one-chrome-hover); }

/* ---------------------------------------------------------------------
   Menu lateral
   --------------------------------------------------------------------- */

.one-menu{
  position: fixed;
  top: var(--one-barra-alto); bottom: 0; left: 0;
  width: var(--one-menu-ancho);
  overflow-y: auto;
  background: var(--one-chrome-alt);
  border-right: 1px solid var(--one-chrome-line);
  z-index: 900;
  transition: transform .2s ease;
}
.one-menu a{
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--one-tactil);
  padding: .4rem .9rem;
  color: var(--one-on-chrome-mute);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.one-menu a:hover{ background: var(--one-chrome-hover); color: var(--one-on-chrome); }
.one-menu a.activa{
  background: var(--one-chrome-hover);
  color: var(--one-on-chrome);
  border-left-color: var(--one-marca);
}
/* Jerarquico: opciones principales plegables y, dentro, las finales. El
   grupo de la opcion activa arranca abierto (clase desde el servidor); el
   resto lo abre el usuario (one-menu.js). */
.one-menu__inicio{
  font-weight: 700;
  border-bottom: 1px solid var(--one-chrome-line);
}
.one-menu__grupo{ border-bottom: 1px solid rgba(255, 255, 255, .05); }
.one-menu__cabecera{
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: var(--one-tactil);
  padding: .4rem .9rem;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--one-on-chrome-mute);
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
}
.one-menu__cabecera:hover{ background: var(--one-chrome-hover); color: var(--one-on-chrome); }
.one-menu__cabecera:focus-visible{ outline: 2px solid var(--one-marca); outline-offset: -2px; }
.one-menu__grupo.abierto > .one-menu__cabecera{ color: var(--one-on-chrome); }
.one-menu__grupo.abierto > .one-menu__cabecera .one-menu__flecha{ transform: rotate(180deg); }
.one-menu__icono{
  width: 1.15rem;
  text-align: center;
  color: var(--one-marca);       /* 4,95:1 sobre el cromo */
  font-size: 1rem;
}
.one-menu__nombre{ flex: 1 1 auto; }
.one-menu__flecha{
  font-size: .7rem;
  color: var(--one-on-chrome-mute);
  transition: transform .2s ease;
}
.one-menu__hijas{
  display: none;
  padding-bottom: .3rem;
  background: rgba(0, 0, 0, .14);
}
.one-menu__grupo.abierto > .one-menu__hijas{ display: block; }
.one-menu a.one-menu__opcion{
  padding-left: 2.1rem;
  font-size: .92rem;
}
.one-menu__opcion .pi{ width: 1rem; text-align: center; font-size: .85rem; opacity: .85; }

/* ---------------------------------------------------------------------
   Area de trabajo
   --------------------------------------------------------------------- */

.one-cuerpo{
  padding-top: var(--one-barra-alto);
  padding-left: var(--one-menu-ancho);
  min-height: 100%;
}
.one-contenido{ padding: 1rem; }

.one-migas{
  font-size: .8rem;
  color: var(--one-muted);
  margin-bottom: .5rem;
}
.one-migas a{ color: var(--one-muted); text-decoration: none; }
.one-migas .sep{ margin: 0 .35rem; }

.one-tarjeta{
  background: var(--one-surface);
  border: 1px solid var(--one-line);
  border-radius: var(--one-radio);
  padding: 1rem;
  margin-bottom: 1rem;
}
.one-tarjeta__titulo{
  margin: -1rem -1rem 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--one-line);
  font-weight: 800;
  color: var(--one-ink);
}

/* ---------------------------------------------------------------------
   Encabezado de modulo (ia/docs/09-estandar-pantallas.md)
   Franja de cromo con el titulo a la izquierda y Cerrar a la derecha, y
   una linea de marca debajo. Lo pinta la plantilla para toda pantalla.
   --------------------------------------------------------------------- */

.one-modulo{
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--one-chrome);
  color: var(--one-on-chrome);
  border-radius: var(--one-radio) var(--one-radio) 0 0;
  border-bottom: 3px solid var(--one-marca);
  padding: .55rem .75rem .55rem 1rem;
  margin-bottom: 1rem;
}
.one-modulo__titulo{
  flex: 1 1 auto;
  margin: 0;
  color: var(--one-on-chrome);
  font-size: 1.25rem;
}
.one-modulo__acciones{
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
}
/* Cerrar: claro sobre el cromo, como en la pantalla de referencia. El azul
   del cromo sobre blanco rinde 16,5:1. */
.one-modulo__cerrar{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: 0 .9rem;
  border-radius: var(--one-radio);
  background: var(--one-surface);
  color: var(--one-chrome);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.one-modulo__cerrar:hover{ background: var(--one-bg); }
.one-modulo__sub{
  margin-left: .35rem;
  color: var(--one-on-chrome-mute);
  font-size: .85rem;
  font-weight: 400;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Inicio: lanzador de opciones (07-ui-y-reportes.md)
   Tarjetas con las opciones principales y, dentro de una, sus finales.
   Verde: disponible. Ambar: la pantalla aun no esta en el WAR. Gris: sin
   acceso (se muestra para que el usuario sepa que existe y la pida).
   --------------------------------------------------------------------- */

.one-lanzador__barra{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .9rem;
}
.one-lanzador__filtro{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 260px;
  max-width: 380px;
  min-height: var(--one-tactil);
  margin: 0;
  padding: 0 .8rem;
  background: var(--one-surface);
  border: 1px solid var(--one-line-control);
  border-radius: var(--one-radio);
  color: var(--one-muted);
  font-weight: 400;
}
.one-lanzador__filtro:focus-within{ border-color: var(--one-marca); }
.one-lanzador__filtro input{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--one-ink);
}
.one-leyenda{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  color: var(--one-muted);
  font-size: .8rem;
}
.one-leyenda__item{ display: inline-flex; align-items: center; gap: .35rem; }
.one-leyenda__punto{ display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.one-leyenda__punto--acceso{ background: var(--st-ok); }
.one-leyenda__punto--construccion{ background: var(--st-warn); }
.one-leyenda__punto--sin-acceso{ background: var(--one-line-control); }

.one-lanzador{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}
.one-lanzador__tarjeta{
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 84px;
  padding: .85rem .9rem;
  background: var(--one-surface);
  border: 1px solid var(--one-line);
  border-radius: 10px;
  color: var(--one-ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.one-lanzador__tarjeta:hover{
  border-color: var(--one-marca);
  box-shadow: 0 6px 18px rgba(10, 31, 59, .10);
  transform: translateY(-1px);
}
a.one-lanzador__tarjeta:focus-visible{ outline: 2px solid var(--one-marca-text); outline-offset: 2px; }
.one-lanzador__icono{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--one-chrome);
  color: var(--one-marca);
  font-size: 1.25rem;
}
.one-lanzador__texto{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.one-lanzador__nombre{ font-weight: 700; font-size: .95rem; line-height: 1.25; }
.one-lanzador__estado{ font-size: .78rem; font-weight: 700; }
.one-lanzador__flecha{ flex: 0 0 auto; color: var(--one-muted); font-size: .8rem; }
.one-lanzador__tarjeta--acceso .one-lanzador__estado{ color: var(--st-ok); }
.one-lanzador__tarjeta--grupo{ border-style: dashed; }
.one-lanzador__tarjeta--grupo .one-lanzador__estado{ color: var(--one-marca-text); }
.one-lanzador__tarjeta--construccion .one-lanzador__icono{ background: var(--st-warn-soft); color: var(--st-warn); }
.one-lanzador__tarjeta--construccion .one-lanzador__estado{ color: var(--st-warn); }
.one-lanzador__tarjeta--sin-acceso{ opacity: .65; }
.one-lanzador__tarjeta--sin-acceso .one-lanzador__icono{ background: var(--one-bg); color: var(--one-muted); }
.one-lanzador__tarjeta--sin-acceso .one-lanzador__estado{ color: var(--one-muted); }

/* ---------------------------------------------------------------------
   Listado: filtros y tabla de resultados (09-estandar-pantallas.md)
   --------------------------------------------------------------------- */

/* Fila de botones de la tarjeta de filtros: Buscar, Limpiar, Nuevo, a la
   derecha. En telefono se apila (ver el bloque de 767px). */
.one-filtros__acciones{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  padding: .5rem .5rem 0;
}

/* Las columnas se miden por lo que llevan dentro, no a partes iguales.
   PrimeFaces pone table-layout: fixed, que reparte el ancho por igual entre
   todas las columnas sin mirar el contenido, y sus celdas van con
   overflow: hidden. Con diez columnas en 1260 px, la de Acciones quedaba en
   126 px cuando sus cuatro iconos de 44 px necesitan 187: el ultimo icono
   salia cortado y no habia forma de llegar a el, porque lo que sobra de una
   celda no entra en el area de desplazamiento (usuario, 2026-09-22).
   Con auto la columna toma sus 187 px y las de texto ceden -ya vienen
   partiendo en varias lineas-; si aun asi la tabla no cabe, desplaza el
   envoltorio, que trae overflow: auto del propio PrimeFaces. */
.one-tabla.ui-datatable > .ui-datatable-tablewrapper > table{
  table-layout: auto;
}

.one-tabla.ui-datatable thead th{
  background: var(--one-bg) !important;
  color: var(--one-muted) !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-color: var(--one-line) !important;
}
.one-tabla.ui-datatable tbody td{
  border-color: var(--one-line) !important;
  vertical-align: middle;
}
.one-tabla .one-clave{ font-weight: 800; color: var(--one-ink); }
.one-tabla .one-acciones-fila{
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Accion por icono en la tabla: sin fondo ni borde, pero con el objetivo
   tactil completo. Editar en el naranja de texto; desactivar en el carmesi
   de alerta; activar en el verde de "al dia". */
.one-icono, .ui-button.one-icono{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--one-tactil);
  min-height: var(--one-tactil);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--one-radio);
  color: var(--one-marca-text) !important;
  font-size: 1.1rem;
  text-decoration: none;
}
.one-icono:hover, .ui-button.one-icono:enabled:hover{ background: var(--one-bg) !important; }
.one-icono--alerta, .ui-button.one-icono--alerta{ color: var(--st-alert) !important; }
.one-icono--ok, .ui-button.one-icono--ok{ color: var(--st-ok) !important; }
/* Consultar (ojo): en el azul del cromo, para distinguirlo de editar. */
.one-icono--ver, .ui-button.one-icono--ver{ color: var(--one-chrome) !important; }

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

.ui-button, .one-boton{
  min-height: var(--one-tactil);
  border-radius: var(--one-radio);
  font-weight: 700;
}

/* NUNCA texto blanco sobre el naranja de marca: rinde 3,34:1, que no
   alcanza para texto normal. El texto del boton va en el azul del cromo,
   que da 4,95:1. */
.ui-button, .one-boton--primario{
  background: var(--one-marca) !important;
  border-color: var(--one-marca) !important;
  color: var(--one-chrome) !important;
}

/* El hover ACLARA el naranja en vez de oscurecerlo, que es lo habitual.
   El texto del boton es el azul oscuro: oscurecer el fondo los acerca y
   el par cae a 3,97:1. Aclarando sube a 5,31:1.
   El borde se queda en el naranja base a proposito: es lo que mantiene
   el limite del control en 3,11:1 contra el fondo de la pagina, que es
   lo que exige WCAG 1.4.11 para componentes de interfaz. */
.ui-button:enabled:hover, .one-boton--primario:hover{
  background: var(--one-marca-hover) !important;
}

.one-boton--plano{
  background: transparent !important;
  border: 1px solid var(--one-line-control) !important;
  color: var(--one-body) !important;
}
/* Sin esto, el hover generico de .ui-button (mas especifico por sus dos
   pseudoclases) pintaba de naranja los botones planos. */
.ui-button.one-boton--plano:enabled:hover{ background: var(--one-bg) !important; }

/* Boton oscuro: la accion de alta ("Nueva sucursal") del listado. Cromo con
   texto blanco, 16,5:1. */
.one-boton--oscuro, .ui-button.one-boton--oscuro{
  background: var(--one-chrome) !important;
  border-color: var(--one-chrome) !important;
  color: var(--one-on-chrome) !important;
}
.one-boton--oscuro:hover, .ui-button.one-boton--oscuro:enabled:hover{
  background: var(--one-chrome-hover) !important;
}

/* Un enlace GET vestido de boton (Nueva sucursal): misma altura y forma que
   los ui-button para que la fila de acciones se vea pareja. */
a.one-boton{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 1rem;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
}

/* Los bordes de campo usan --one-line-control (3,03:1). --one-line es
   1,28:1: sirve de separador, no de borde de control. */
.ui-inputfield, .ui-selectonemenu, .ui-inputtext{
  min-height: var(--one-tactil);
  border-color: var(--one-line-control) !important;
  border-radius: var(--one-radio) !important;
}
.ui-inputfield:focus{
  outline: 2px solid var(--one-marca-text);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------
   Calendario compacto
   ---------------------------------------------------------------------
   Pedido del usuario (2026-09-14): un calendario mas pequeno y con el que
   sea facil ir a meses y anios lejanos. Se aplica con
   panelStyleClass="one-calendario" en el p:datePicker.

   El salto lo dan los atributos del componente, no este CSS:
   monthNavigator pone el mes en una lista y yearNavigator pone el anio en un
   campo numerico donde se escribe (1985) o se sube y baja con las flechas.
   yearRange solo acepta anios fijos ("1920:2060"): PrimeFaces 14 no entiende
   rangos relativos al anio en curso.

   Lo que si hace este CSS es encogerlo. El tema saga da a cada dia 2.5rem mas
   .5rem de relleno por lado y 1rem a la cabecera: un panel de mas de 400 px
   de ancho para elegir una fecha. Aqui cada dia mide 2rem y el panel queda
   en unos 16rem.
   --------------------------------------------------------------------- */

body .ui-datepicker.one-calendario{
  padding: .25rem .5rem;
  font-size: .875rem;
  max-width: calc(100vw - 1rem);
  border-color: var(--one-line-control);
  border-radius: var(--one-radio);
}
body .ui-datepicker.one-calendario .ui-datepicker-header{
  padding: .375rem 0;
}
body .ui-datepicker.one-calendario .ui-datepicker-prev,
body .ui-datepicker.one-calendario .ui-datepicker-next{
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  margin-top: -.875rem;
}
/* Mes y anio uno junto al otro, centrados entre las dos flechas. */
body .ui-datepicker.one-calendario .ui-datepicker-title{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .375rem;
}
body .ui-datepicker.one-calendario .ui-datepicker-title select,
body .ui-datepicker.one-calendario .ui-datepicker-title input{
  width: auto;
  height: 1.875rem;
  margin: 0;
  padding: 0 .375rem;
  font: inherit;
  font-weight: 600;
  color: var(--one-ink);
  background: var(--one-surface);
  border: 1px solid var(--one-line-control);
  border-radius: var(--one-radio);
}
body .ui-datepicker.one-calendario .ui-datepicker-title select:first-child{
  margin-right: 0;
}
/* Cuatro cifras y las flechas del campo numerico, sin sobrar. */
body .ui-datepicker.one-calendario .ui-datepicker-title input{
  width: 4.75rem;
}
body .ui-datepicker.one-calendario .ui-datepicker-title select:focus,
body .ui-datepicker.one-calendario .ui-datepicker-title input:focus{
  outline: 2px solid var(--one-marca-text);
  outline-offset: 1px;
}
body .ui-datepicker.one-calendario .ui-datepicker-calendar{
  margin: .25rem 0;
}
body .ui-datepicker.one-calendario .ui-datepicker-calendar th,
body .ui-datepicker.one-calendario .ui-datepicker-calendar td{
  padding: .0625rem;
}
body .ui-datepicker.one-calendario .ui-datepicker-calendar th{
  font-size: .75rem;
  color: var(--one-muted);
}
body .ui-datepicker.one-calendario .ui-datepicker-calendar th > span,
body .ui-datepicker.one-calendario .ui-datepicker-calendar td > a,
body .ui-datepicker.one-calendario .ui-datepicker-calendar td > span{
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
/* Los dias del mes vecino se ven, pero en segundo plano. */
body .ui-datepicker.one-calendario .ui-datepicker-other-month > a,
body .ui-datepicker.one-calendario .ui-datepicker-other-month > span{
  color: var(--one-muted);
}
body .ui-datepicker.one-calendario .ui-datepicker-buttonbar{
  display: flex;
  justify-content: space-between;
  padding: .375rem 0 .125rem;
}
body .ui-datepicker.one-calendario .ui-datepicker-buttonbar .ui-button{
  min-height: 2rem;
  font-size: .8125rem;
}

/* En telefono el calendario deja de ser compacto y pasa a ser tactil. Esas
   reglas estan AL FINAL de la hoja, despues del bloque de telefono de la
   plantilla, y no aqui: ContratoResponsivoTest toma el primer bloque de
   telefono (max-width 767px) como el de la plantilla, y uno del calendario
   delante lo confunde. */

/* ---------------------------------------------------------------------
   Rejilla
   ---------------------------------------------------------------------
   Las clases p-grid / p-col-* / p-md-* son de PrimeFlex, que es una
   biblioteca aparte y NO viene con PrimeFaces. Sin ella las declaraciones
   de la pagina no hacen nada: los formularios se apilan a una columna en
   cualquier ancho y la pagina se ve correcta, solo que mal maquetada. Se
   descubrio mirando una captura a 1280 px.

   Se implementa aqui el subconjunto que se usa en vez de agregar la
   dependencia: son treinta lineas y evitan traer una biblioteca entera —y
   un origen externo— para repartir doceavos.

   Movil primero: sin punto de quiebre todo ocupa el ancho completo, y a
   partir de 768 px mandan las p-md-*. Es lo que pide 07-ui-y-reportes.md:
   una columna en telefono, dos o tres en escritorio.
   --------------------------------------------------------------------- */

.p-grid{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -.5rem;
}
.p-grid > *{
  box-sizing: border-box;
  padding: .5rem;
  flex: 0 0 auto;
  width: 100%;
  /* Sin esto la columna no puede encoger por debajo de su contenido (el
     min-width: auto de un item flex) y CRECE mas alla de su porcentaje: un
     combo con una opcion larga hacia una columna de 33% de 405 px dentro de
     309, montandose sobre la de al lado y tapandole la flecha. */
  min-width: 0;
}

.p-col-1{ width: 8.333333%; }
.p-col-2{ width: 16.666667%; }
.p-col-3{ width: 25.000000%; }
.p-col-4{ width: 33.333333%; }
.p-col-5{ width: 41.666667%; }
.p-col-6{ width: 50.000000%; }
.p-col-7{ width: 58.333333%; }
.p-col-8{ width: 66.666667%; }
.p-col-9{ width: 75.000000%; }
.p-col-10{ width: 83.333333%; }
.p-col-11{ width: 91.666667%; }
.p-col-12{ width: 100%; }

@media (min-width: 768px){
  .p-md-1{ width: 8.333333%; }
  .p-md-2{ width: 16.666667%; }
  .p-md-3{ width: 25.000000%; }
  .p-md-4{ width: 33.333333%; }
  .p-md-5{ width: 41.666667%; }
  .p-md-6{ width: 50.000000%; }
  .p-md-7{ width: 58.333333%; }
  .p-md-8{ width: 66.666667%; }
  .p-md-9{ width: 75.000000%; }
  .p-md-10{ width: 83.333333%; }
  .p-md-11{ width: 91.666667%; }
  .p-md-12{ width: 100%; }
}

/* Campo de formulario: etiqueta encima del control. Apilado y no en
   linea, porque en telefono es la unica forma que cabe y tener dos
   maquetas para lo mismo es como se desincronizan. */
.one-campo{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .35rem .5rem;
}
.one-campo__control{ width: 100%; }
/* Un combo se queda dentro de su columna aunque su opcion sea larga.
   PrimeFaces mide la opcion mas ancha y le fija un MIN-WIDTH al widget
   (autoWidth), que gana sobre cualquier width: con "SISTEMA FRANCES (CUOTA
   FIJA)" el control exigia 405 px en una columna de 324, se montaba sobre el
   combo vecino y este le tapaba la flecha. Anularlo es lo unico que lo
   sujeta; la etiqueta se trunca dentro (regla de abajo). */
.one-campo .ui-selectonemenu{ width: 100%; min-width: 0 !important; }
.one-campo .ui-selectonemenu .ui-selectonemenu-label{
  /* PrimeFaces fija el ancho de la etiqueta por JavaScript segun la opcion
     elegida; con una que llena el control, el disparador se salia del borde
     y quedaba recortado. El tope deja siempre su sitio. */
  max-width: calc(100% - 2.6rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Selector de fecha: el campo y su boton en una sola linea, ocupando la
   columna. Sin esto, en una columna estrecha el boton caia debajo del campo. */
.one-campo .ui-calendar{ display: inline-flex; width: 100%; }
.one-campo .ui-calendar > input{ flex: 1 1 auto; min-width: 0; width: auto; }
.one-campo .ui-calendar > button{ flex: 0 0 auto; }

/* Fila de acciones de un formulario.
   En telefono el boton ocupa el ancho: es el objetivo tactil comodo. En
   escritorio se ajusta al texto, porque un boton de 900 px de ancho se lee
   como una franja y no como un boton. */
.one-acciones{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem;
}
.one-acciones .ui-button{ width: 100%; }

@media (min-width: 768px){
  .one-acciones .ui-button{ width: auto; }
}

/* Camino del arbol geografico: "San Salvador / Soyapango / Distrito 3". */
.one-ruta{
  color: var(--one-body);
  font-weight: 600;
}
.one-ruta__aqui{
  color: var(--one-marca-text);   /* naranja de TEXTO: 5,13:1 */
  font-weight: 800;
}

/* Aviso dentro de una tarjeta cuando falta un dato previo. */
.one-nota{
  background: var(--one-marca-soft);
  border-left: 3px solid var(--one-marca);
  color: var(--one-body);
  padding: .6rem .8rem;
  border-radius: var(--one-radio);
}

/* Bitacora de un proceso por pasos (instalacion de una financiera). */
.one-pasos{ list-style: none; margin: .25rem 0 0; padding: 0; }
.one-pasos li{
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .4rem 0; border-bottom: 1px solid var(--one-line);
}
.one-pasos li:last-child{ border-bottom: 0; }
.one-pasos .pi{ margin-top: .15rem; }
.one-pasos__ok .pi{ color: var(--st-ok); }
.one-pasos__fallo .pi{ color: var(--st-alert); }
.one-pasos .et{ display: block; font-weight: 700; color: var(--one-ink); }
.one-pasos .va{ display: block; color: var(--one-body); overflow-wrap: anywhere; }

label, .one-etiqueta{
  display: block;
  color: var(--one-muted);
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .2rem;
}

/* Importes: alineados a la derecha y con cifras de ancho fijo, para que las
   columnas de una tabla de cartera se puedan comparar de un vistazo. */
.one-importe{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El mismo importe, pero dentro de una ficha de campos (one-campo): ahi el
   numero se lee pegado a su etiqueta, no contra el borde de la columna. */
.one-cifra{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Formularios compuestos por pestanas (09-estandar-pantallas.md, seccion
   10): alta de cliente. Las pestanas son de PrimeFaces; aqui solo se les
   quita la caja del tema y se marca la activa con la linea de marca.
   --------------------------------------------------------------------- */

/* En el tema Saga el relleno (1rem) y la linea de estado van en el <li>, no en
   el <a>: se reescriben ahi, con la misma especificidad que el tema
   (body .ui-tabs .ui-tabs-nav li.ui-tabs-header) mas la clase propia. */
.one-pestanas.ui-tabs{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.one-pestanas.ui-tabs > .ui-tabs-nav{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 .25rem !important;
}
/* El tema pinta la linea de base con :before; solo se recolora. */
.one-pestanas.ui-tabs > .ui-tabs-nav:before{ border-bottom-color: var(--one-line) !important; }
body .one-pestanas.ui-tabs .ui-tabs-nav li.ui-tabs-header{
  min-height: var(--one-tactil);
  padding: 0 1rem !important;
  background: transparent !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .one-pestanas.ui-tabs .ui-tabs-nav li.ui-tabs-header a{
  padding: 0 !important;
  color: var(--one-muted) !important;
  font-weight: 700;
  text-decoration: none;
}
body .one-pestanas.ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active{
  border-bottom-color: var(--one-marca) !important;
}
body .one-pestanas.ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a{
  color: var(--one-marca-text) !important;   /* naranja de TEXTO: 5,13:1 */
}
.one-pestanas.ui-tabs > .ui-tabs-panels{
  border: 0 !important;
  padding: 1rem 0 0 !important;
  background: transparent !important;
}
.one-pestanas .ui-tabs-panel{ padding: 0 !important; }

/* Tarjeta de captura de un renglon (direccion, identificacion): se
   distingue de la tabla de arriba con la linea de marca a la izquierda. */
.one-subformulario{ border-left: 3px solid var(--one-marca); }

/* Un boton nativo vestido igual que los ui-button (Usar mi ubicacion). */
button.one-boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 0 1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.one-geo__estado{ font-size: .78rem; color: var(--one-muted); }
.one-texto-suave{ color: var(--one-muted); font-style: italic; }

.ui-inputtextarea{
  width: 100%;
  border-color: var(--one-line-control) !important;
  border-radius: var(--one-radio) !important;
}

/* ---------------------------------------------------------------------
   Digitalizacion: galeria de archivos por objetivo (cliente, direccion,
   documento). Rejilla fluida: en telefono caben dos por fila.
   --------------------------------------------------------------------- */

.one-galeria{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}
.one-galeria__cuenta{
  margin-left: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--one-muted);
}
.one-galeria__sub{ margin: -.5rem 0 .75rem; }
.one-galeria__vacio{ color: var(--one-muted); padding: 0 0 .25rem; }

.one-foto{
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--one-line);
  border-radius: var(--one-radio);
  overflow: hidden;
  background: var(--one-surface);
}
.one-foto__marco{
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--one-bg);
  color: var(--one-chrome);
  text-decoration: none;
}
.one-foto__imagen{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.one-foto__pdf{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 100%;
  font-weight: 700;
  font-size: 1.1rem;
}
.one-foto figcaption{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .4rem .5rem .3rem;
  font-size: .78rem;
  color: var(--one-body);
}
.one-foto figcaption strong{ color: var(--one-ink); }
.one-foto__fecha{ color: var(--one-muted); }
.one-foto__quitar, .ui-button.one-foto__quitar{ align-self: flex-end; min-height: 36px; }

/* El cargador de PrimeFaces con los botones del estandar y a todo el ancho. */
.one-cargador.ui-fileupload{ width: 100%; }
.one-cargador .ui-fileupload-buttonbar{ background: transparent; border: 0; padding: 0 0 .5rem; }
.one-cargador .ui-fileupload-content{
  border: 1px dashed var(--one-line-control);
  border-radius: var(--one-radio);
  background: var(--one-bg);
  min-height: 3rem;
}

/* ---------------------------------------------------------------------
   Estados de cartera
   --------------------------------------------------------------------- */

.one-estado{
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.one-estado--ok{    background: var(--st-ok-soft);    color: var(--st-ok); }
.one-estado--warn{  background: var(--st-warn-soft);  color: var(--st-warn); }
.one-estado--alert{ background: var(--st-alert-soft); color: var(--st-alert); }
/* Tipo de cuenta en Usuarios: el perfil se distingue con el cromo, no con un
   color de estado (no es un estado). */
.one-estado--perfil{ background: var(--one-chrome); color: var(--one-on-chrome); }
.one-estado + .one-estado{ margin-left: .3rem; }
.one-rol{ margin: 0 .3rem .3rem 0; }

/* Casillas de roles de una persona en una sola fila que se envuelve. */
.one-roles{ flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; }
.one-roles .ui-chkbox-label{ margin-left: .35rem; }
/* Arbol de opciones y permisos: sangria por nivel y filas de grupo. */
.one-nivel{ display: inline-flex; align-items: center; gap: .4rem; }
.one-nivel-0{ font-weight: 700; color: var(--one-ink); }
.one-nivel-1{ padding-left: 1.4rem; }
.one-nivel-2{ padding-left: 2.8rem; }
.one-nivel-3{ padding-left: 4.2rem; }
.one-nivel__icono{ color: var(--one-muted); font-size: .9rem; }
.one-nivel-0 .one-nivel__icono{ color: var(--one-marca-text); }
.one-tabla tr.one-fila--grupo > td{ background: var(--one-bg); }
.one-url{ font-size: .8rem; color: var(--one-muted); word-break: break-all; }
.one-permisos__flags{ display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.one-permisos__flags .ui-chkbox-label{ margin-left: .3rem; }
.one-permisos__origen .ui-chkbox-label{ margin-left: .3rem; font-weight: 700; }
.one-permisos__hereda{ font-size: .75rem; color: var(--one-muted); margin-top: .2rem; }

/* Un boton alineado con los campos de su fila (Restablecer contrasena). */
.one-campo--boton{ justify-content: flex-end; }
.one-campo--boton .ui-button{ width: 100%; min-height: var(--one-tactil); }

/* ---------------------------------------------------------------------
   Responsividad
   Quiebres de 07-ui-y-reportes.md: >=1200 escritorio, 768-1199 tableta,
   <768 telefono.
   --------------------------------------------------------------------- */

@media (max-width: 1199px){
  :root{ --one-menu-ancho: 220px; }
}

@media (max-width: 767px){
  /* En telefono el menu se desliza sobre el contenido en vez de empujarlo:
     con 360px de ancho, un menu fijo no deja sitio para trabajar.
     Lo normal aqui es OCULTO, y la clase lo despliega. */
  .one-menu{
    transform: translateX(-100%);
    box-shadow: 0 0 24px rgba(0,0,0,.4);
  }
  body.menu-alterno .one-menu{ transform: translateX(0); }
  .one-cuerpo{ padding-left: 0; }
  .one-contenido{ padding: .6rem; }

  .one-velo{
    position: fixed; inset: var(--one-barra-alto) 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 850;
    display: none;
  }
  body.menu-alterno .one-velo{ display: block; }

  /* Datos secundarios de la barra: se ocultan salvo la fecha contable,
     que nunca desaparece. */
  .one-barra__dato:not(.one-fecha-contable){ display: none; }
  /* A 360 px caben el menu, el logo, la fecha contable y salir. */
  .one-barra__logo{ height: 30px; }

  /* Formularios de una columna. */
  .one-campo{ width: 100% !important; }

  /* Lanzador de Inicio: una tarjeta por fila, filtro a todo el ancho. */
  .one-lanzador{ grid-template-columns: 1fr; }
  .one-lanzador__filtro{ max-width: none; }
  .one-modulo__sub{ display: block; margin-left: 0; }

  /* Las tablas dejan de ser tablas: una tabla de cartera con scroll
     horizontal en un telefono es inservible. Se apoya en el reflow de
     PrimeFaces y se refuerza aqui. */
  /* El !important del ancho no es capricho: una tabla con muchas columnas
     reparte a mano su ancho (p:column style="width:8%"), y eso llega como
     estilo en linea sobre el td, que de otro modo gana a esta regla y deja
     cada celda en una tira de 8% en el telefono. Corte de caja es el caso. */
  .ui-datatable-reflow .ui-datatable-data td{
    display: block;
    width: 100% !important;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--one-line);
  }
  .ui-datatable-reflow .ui-datatable-thead{ display: none; }

  /* Listado en telefono: los botones de filtro se apilan a ancho completo,
     y el encabezado de modulo deja que el titulo se parta sin perder el
     boton Cerrar. */
  .one-filtros__acciones{ flex-direction: column; }
  .one-filtros__acciones .ui-button,
  .one-filtros__acciones a.one-boton{ width: 100%; justify-content: center; }
  .one-modulo{ align-items: flex-start; }
  .one-modulo__titulo{ font-size: 1.1rem; }

  /* Pestanas: mas compactas para que las tres del alta de cliente quepan
     en una fila de 360 px; el objetivo tactil se conserva (min-height). */
  body .one-pestanas.ui-tabs .ui-tabs-nav li.ui-tabs-header{ padding: 0 .4rem !important; }
  body .one-pestanas.ui-tabs .ui-tabs-nav li.ui-tabs-header a{ font-size: .85rem; }

  /* Galeria a dos columnas en telefono, y el boton del cargador con su
     texto: el tema lo deja en solo icono a menos de 640 px. */
  .one-galeria{ grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .one-cargador .ui-fileupload-choose{ width: 100%; }
  .one-cargador .ui-fileupload-choose .ui-icon{ display: none; }
  .one-cargador .ui-fileupload-choose .ui-button-text{ display: inline !important; padding: 0 1rem; }
}

/* En pantallas grandes el menu siempre esta. */
/* ---------------------------------------------------------------------
   Escritorio: lo normal es el menu A LA VISTA, y la clase lo colapsa.
   ---------------------------------------------------------------------
   Es al reves que en telefono a proposito: la misma clase significa "lo
   contrario de lo normal para este ancho", y asi una sola bandera sirve para
   los dos. Antes no habia ninguna regla aqui: el boton cambiaba la clase y
   no se movia nada, que es como se veia "el menu no se contrae".
   --------------------------------------------------------------------- */

@media (min-width: 768px){
  body.menu-alterno .one-menu{ transform: translateX(-100%); }
  /* El contenido recupera el ancho del menu; la transicion acompana al
     deslizamiento para que no salte. */
  body.menu-alterno .one-cuerpo{ padding-left: 0; }
  .one-cuerpo{ transition: padding-left .2s ease; }
}

@media (min-width: 768px){
  /* En escritorio no hay velo: el menu no tapa nada. */
  .one-velo{ display: none; }
  .one-menu__cerrar{ display: none; }
}

/* Quien prefiera menos movimiento, lo obtiene. */
@media (prefers-reduced-motion: reduce){
  .one-menu, .one-cuerpo{ transition: none; }
}

/* ------------------------------------------------------------------ Tablero
   Los cuatro numeros al pie del inicio. Misma rejilla y misma altura que el
   lanzador, para que se lea como parte de la pantalla y no como un anexo. La
   diferencia esta en el borde de marca a la izquierda y en que aqui manda el
   numero: la etiqueta acompana. */
.one-tablero{ margin-top: 1.5rem; }
.one-tablero__cabecera{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
  margin: 0 0 .6rem;
}
.one-tablero__titulo{ font-size: .95rem; font-weight: 700; color: var(--one-ink); }
.one-tablero__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .75rem;
}
.one-kpi{
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 84px;
  padding: .85rem .9rem;
  background: var(--one-surface);
  border: 1px solid var(--one-line);
  border-left: 3px solid var(--one-marca);
  border-radius: 10px;
}
.one-kpi__icono{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--one-marca-soft);
  color: var(--one-marca-text);
  font-size: 1.1rem;
}
.one-kpi__texto{ display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.one-kpi__numero{
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--one-ink);
  font-variant-numeric: tabular-nums;
}
.one-kpi__etiqueta{ font-size: .85rem; font-weight: 700; color: var(--one-body); }
.one-kpi__nota{ font-size: .74rem; color: var(--one-muted); }

/* ---------------------------------------------------------------------
   Aviso de avaluos vencidos en el inicio (§8 del documento 14).

   Va en el carmesi de la alerta y NO en el naranja de la marca, que es el
   de los indicadores de al lado: si compartiera color se leeria como un
   sexto numero. El borde izquierdo grueso es el mismo recurso que usa
   .one-kpi, para que se reconozca como parte del inicio y no como un error
   de la pagina.
   --------------------------------------------------------------------- */
.one-caducados{
  margin-top: 1.5rem;
  padding: .85rem .9rem;
  background: var(--st-alert-soft);
  border: 1px solid var(--st-alert);
  border-left: 3px solid var(--st-alert);
  border-radius: 10px;
}
.one-caducados__cabecera{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .6rem;
  align-items: baseline;
}
.one-caducados__icono{ color: var(--st-alert); font-size: 1.1rem; }
.one-caducados__titulo{ font-size: .95rem; font-weight: 800; color: var(--st-alert); }
/* La nota arranca en la segunda columna, debajo del titulo y no del icono. */
.one-caducados__nota{
  grid-column: 2; font-size: .78rem; color: var(--one-body); max-width: 70ch;
}
.one-caducados__lista{
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
}
/* El separador va en el token neutro y no en un carmesi rebajado a mano: un
   color escrito aqui se queda fuera de la paleta y del tema oscuro. */
.one-caducados__lista li{
  padding: .35rem 0;
  border-top: 1px solid var(--one-line);
}
.one-caducados__desc{
  display: block; font-weight: 700; color: var(--one-ink); font-size: .88rem;
}
.one-caducados__meta{ display: block; font-size: .76rem; color: var(--one-body); }
.one-caducados__pie{
  margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline;
  font-size: .82rem;
}
.one-caducados__pie a{ font-weight: 700; color: var(--st-alert); }
.one-caducados__pie .pi{ font-size: .72rem; }

/* ---------------------------------------------------------------------
   Recorrido del cobrador: el mapa y el resumen de la jornada.
   La altura va en vh y no en pixeles para que sirva en telefono y en
   escritorio; el ancho lo da la tarjeta.
   --------------------------------------------------------------------- */
/* El editor de poligonos va mas bajo que el visor: comparte pantalla con el
   formulario, y 60vh dejaria los campos fuera de la vista al dibujar. */
.one-mapa--editor{ height: 38vh; min-height: 260px; margin-top: .5rem; }

.one-mapa{
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--one-line);
  border-radius: var(--one-radio);
  background: var(--one-bg);
}
/* Elegir las coordenadas de una direccion sobre el mapa (usuario, 2026-09-22).
   Va dentro de la tarjeta de captura del cliente, asi que es mas bajo que el
   del recorrido: ahi el mapa es la pantalla, aqui es un campo mas. */
.one-mapa-punto{
  margin-top: .5rem;
  padding: .75rem;
  border: 1px solid var(--one-line);
  border-radius: var(--one-radio);
  background: var(--one-bg);
}
.one-mapa-punto > p{ margin: 0 0 .5rem; }
.one-mapa.one-mapa--punto{
  height: 42vh;
  min-height: 260px;
  background: var(--one-surface);
}
/* El cursor dice que el mapa se toca para fijar el punto. */
.one-mapa--punto .leaflet-container{ cursor: crosshair; }
/* "Listo" cierra el panel y no es la accion principal de la pantalla: se queda
   del tamano de su texto, a la derecha. Sin esto se estira a todo el ancho del
   panel -medido: 900 px por 67- y compite con Guardar. */
.one-mapa-punto .one-filtros__acciones .one-boton{ width: fit-content; }

.one-resumen .et{ display: block; font-size: .8rem; color: var(--one-muted); }
.one-resumen .va{ display: block; font-weight: 700; color: var(--one-ink); }
.one-fila--activa > td{ background: var(--one-marca-soft) !important; }

/* ---------------------------------------------------------------------
   Calendario tactil en telefono
   ---------------------------------------------------------------------
   El calendario compacto (.one-calendario, arriba) sirve con raton; con el
   dedo, un dia de 32 px se falla. Revisado con el usuario el 2026-09-14:
   Apple pide 44 pt por objetivo tactil y Material 48 dp, asi que en telefono
   todo lo que se toca mide var(--one-tactil), 44 px —cada dia, las
   flechas, el mes, el anio y los dos botones—, el mismo token que ya usan
   los campos y botones de la plantilla.

   En px y no en rem, a proposito: en esta hoja 1rem no vale 16 px. Medido en
   el navegador a 412 px, 2.75rem daba 41 px y 1rem 15 px. La letra va en
   16px porque iOS Safari hace zoom sobre cualquier campo de menos de 16 px
   al tocarlo, y el del anio lo es.

   Siete columnas de 44 px mas su relleno son unos 320 px: caben en un
   telefono de 360 px.

   En pantallas asi PrimeFaces ya abre el panel centrado y con el fondo
   oscurecido (responsiveBreakpoint); eso no se toca.

   Va al final y no junto al compacto: ContratoResponsivoTest lee el primer
   bloque de telefono de la hoja como el de la plantilla.
   --------------------------------------------------------------------- */
@media (max-width: 767px){
  body .ui-datepicker.one-calendario{
    padding: .5rem;
    font-size: 16px;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-header{
    padding: .5rem 0;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-prev,
  body .ui-datepicker.one-calendario .ui-datepicker-next{
    width: var(--one-tactil);
    height: var(--one-tactil);
    line-height: var(--one-tactil);
    margin-top: calc(var(--one-tactil) / -2);
  }
  body .ui-datepicker.one-calendario .ui-datepicker-title{
    gap: .5rem;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-title select,
  body .ui-datepicker.one-calendario .ui-datepicker-title input{
    height: var(--one-tactil);
    padding: 0 .5rem;
    font-size: 16px;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-title input{
    width: 5.5rem;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-calendar th{
    font-size: 14px;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-calendar th > span,
  body .ui-datepicker.one-calendario .ui-datepicker-calendar td > a,
  body .ui-datepicker.one-calendario .ui-datepicker-calendar td > span{
    width: var(--one-tactil);
    height: var(--one-tactil);
    line-height: var(--one-tactil);
  }
  body .ui-datepicker.one-calendario .ui-datepicker-buttonbar{
    padding: .5rem 0 .25rem;
    gap: .5rem;
  }
  /* Mitad y mitad: se estira el hijo directo de la barra (PrimeFaces envuelve
     cada boton en su propio contenedor) y el boton lo llena. Asi funciona
     haya envoltura o no. */
  body .ui-datepicker.one-calendario .ui-datepicker-buttonbar > *{
    flex: 1 1 0;
  }
  body .ui-datepicker.one-calendario .ui-datepicker-buttonbar .ui-button{
    width: 100%;
    min-height: var(--one-tactil);
    font-size: 16px;
  }
  /* Con hora (showTime, la baja del cobro movil): las flechas de hora y
     minuto tambien se tocan con el dedo. */
  body .ui-datepicker.one-calendario .ui-timepicker{
    font-size: 16px;
  }
  body .ui-datepicker.one-calendario .ui-timepicker .ui-picker-up,
  body .ui-datepicker.one-calendario .ui-timepicker .ui-picker-down{
    width: var(--one-tactil);
    height: var(--one-tactil);
    line-height: var(--one-tactil);
  }
}

/* ---------------------------------------------------------------------
   Informes consolidados de cartera (411 vigente y vencida, 412 tramos de
   mora): un tablero por fecha contable, con cifras de cabecera, una tabla
   corta y barras de composicion. Se lee en pantalla y se imprime desde el
   navegador (resources/js/one-imprimir.js); la hoja de impresion va al
   final de este bloque. Las barras son anchos en linea: style-src admite
   'unsafe-inline' (ContratoCspTest), script-src no.
   --------------------------------------------------------------------- */
.one-informe__corte{
  margin-top: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--one-surface);
  border: 1px solid var(--one-line);
  border-radius: 10px;
}
.one-informe__cabecera{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--one-line);
}
.one-informe__titulo{ margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--one-ink); }
.one-informe__subtitulo{ margin: .15rem 0 0; font-size: .9rem; color: var(--one-body); }
.one-informe__corte-dato{ text-align: right; font-size: .82rem; color: var(--one-muted); line-height: 1.5; }

.one-informe__kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.1rem 0 1.2rem;
}
.one-informe__kpi-etiqueta{ font-size: .88rem; color: var(--one-body); }
.one-informe__kpi-numero{
  font-size: 1.55rem; font-weight: 600; line-height: 1.2;
  color: var(--one-ink);
  font-variant-numeric: tabular-nums;
}
.one-informe__kpi-nota{ font-size: .8rem; color: var(--one-muted); }
.one-informe__kpi-nota--ok{ color: var(--st-ok); }
.one-informe__kpi-nota--alerta{ color: var(--st-alert); }

.one-informe__leyenda{ display: flex; gap: 1.2rem; margin: 0 0 .5rem; font-size: .84rem; color: var(--one-body); }
.one-informe__muestra{
  display: inline-block; width: .8rem; height: .8rem;
  margin-right: .35rem; vertical-align: -1px; border-radius: 2px;
}

.one-informe__tabla{ width: 100%; border-collapse: collapse; font-size: .86rem; }
.one-informe__tabla th{
  padding: .45rem .55rem;
  text-align: left; font-weight: 600; color: var(--one-body);
  border-bottom: 1px solid var(--one-line);
}
.one-informe__tabla th.one-informe__bloque{ text-align: center; border-bottom: 2px solid var(--one-line-control); }
.one-informe__tabla td{
  padding: .45rem .55rem;
  color: var(--one-ink);
  border-bottom: 1px solid var(--one-line);
}
.one-informe__tabla .num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.one-informe__tabla tr.one-informe__grupo td{ background: var(--one-bg); font-weight: 700; color: var(--one-body); }
.one-informe__tabla tr.one-informe__subtotal td{ font-weight: 700; }
.one-informe__tabla tr.one-informe__total td{ font-weight: 700; border-top: 2px solid var(--one-ink); }
/* Con la celda en el selector: ".one-informe__tabla td" pinta la tinta y le
   ganaria a la clase sola. */
.one-informe__alerta,
.one-informe__tabla td.one-informe__alerta{ color: var(--st-alert); }
.one-informe__referencia{ color: var(--one-muted); }

.one-informe__barra{
  display: flex; min-width: 110px; height: .65rem;
  border-radius: 2px; overflow: hidden;
  background: var(--one-line);
}
.one-informe__barra > span{ display: block; height: 100%; }
.one-informe__peso{ display: flex; align-items: center; gap: .5rem; min-width: 140px; }
.one-informe__peso-pista{ display: block; flex: 1 1 auto; }
.one-informe__peso-barra{ display: block; height: .65rem; border-radius: 999px; }
.one-informe__peso-dato{ flex: 0 0 3.2rem; text-align: right; }
.one-informe__peso-dato{ font-size: .78rem; color: var(--one-muted); font-variant-numeric: tabular-nums; }

.one-color--vigente{ background: var(--st-ok); }
.one-color--vencido{ background: var(--st-alert); }
.one-color--al-dia{ background: var(--st-ok); }
.one-color--t1{ background: var(--tramo-1); }
.one-color--t2{ background: var(--tramo-2); }
.one-color--t3{ background: var(--tramo-3); }
.one-color--t4{ background: var(--tramo-4); }
.one-color--t5{ background: var(--tramo-5); }

/* En telefono la tabla no se desplaza de lado (09-estandar-pantallas): cada
   fila pasa a ser una tarjeta y cada celda lleva su rotulo delante. */
@media (max-width: 767px){
  .one-informe__corte{ padding: .9rem .8rem 1rem; }
  .one-informe__corte-dato{ text-align: left; }
  .one-informe__tabla thead{ display: none; }
  .one-informe__tabla, .one-informe__tabla tbody, .one-informe__tabla tr, .one-informe__tabla td{ display: block; width: 100%; }
  .one-informe__tabla tr{ padding: .35rem 0; border-bottom: 1px solid var(--one-line); }
  .one-informe__tabla td{ display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem .3rem; }
  .one-informe__tabla td[data-rotulo]::before{ content: attr(data-rotulo); color: var(--one-muted); font-weight: 400; }
  .one-informe__tabla tr.one-informe__total td{ border-top: 0; }
  .one-informe__barra, .one-informe__peso{ min-width: 0; flex: 0 0 55%; }
}

/* Impresion: solo el informe, sin menu, barra, filtros ni botones; y los
   colores de las barras, que los navegadores quitan por omision. Cada fecha
   contable empieza hoja. */
/* =====================================================================
   Ficha del cliente (302)

   La cabecera es retrato + identidad + acciones, y se apila sola en
   telefono. Las direcciones van como lista con icono, no como tabla: son
   pocas y se leen mejor asi.
   ===================================================================== */
.one-ficha__cabecera{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.one-ficha__retrato{
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--one-marca-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.one-ficha__retrato img{ width: 100%; height: 100%; object-fit: cover; }
.one-ficha__iniciales{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--one-on-chrome);
  background: var(--one-chrome);
}
.one-ficha__identidad{ flex: 1 1 14rem; min-width: 0; }
.one-ficha__identidad h2{ margin: 0 0 .15rem; font-size: 1.3rem; color: var(--one-ink); }
.one-ficha__identidad p{ margin: 0 0 .4rem; }
.one-ficha__acciones{ display: flex; gap: .5rem; flex-wrap: wrap; }

.one-ficha__direcciones{ list-style: none; margin: .25rem 0 1rem; padding: 0; }
.one-ficha__direcciones li{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--one-line);
}
.one-ficha__direcciones li:last-child{ border-bottom: 0; }
.one-ficha__direcciones li > i{
  color: var(--one-marca-text);
  font-size: 1.1rem;
  margin-top: .15rem;
}
.one-ficha__direcciones li > div{ flex: 1 1 auto; min-width: 0; }

/* El mapa de la ficha va dentro de una pestana: mas bajo que el del
   recorrido, que ocupa la pantalla entera. */
.one-tabs .one-mapa{ height: 42vh; min-height: 260px; }
/* Dentro de una pestana, un subtitulo necesita aire arriba: no lo separa la
   tarjeta, porque no hay tarjeta. */
.one-tabs .one-tarjeta__titulo{ margin-top: 1.25rem; }
.one-tabs .p-grid + .one-tarjeta__titulo{ margin-top: .5rem; }

@media (max-width: 640px){
  .one-ficha__acciones{ width: 100%; }
  .one-ficha__acciones .one-boton{ flex: 1 1 auto; justify-content: center; }
}

@media print{
  .one-barra, .one-menu, .one-velo, .one-migas, .one-modulo, .one-filtros,
  .one-no-imprimir, .ui-growl, .ui-messages{ display: none !important; }
  .one-cuerpo{ padding: 0 !important; }
  .one-contenido{ padding: 0 !important; }
  body{ background: #FFFFFF !important; }
  .one-informe__corte{ margin: 0; border: 0; padding: 0; }
  .one-informe__corte + .one-informe__corte{ break-before: page; }
  .one-informe__tabla tr{ break-inside: avoid; }
  .one-informe__barra, .one-informe__barra > span, .one-informe__peso-barra,
  .one-informe__muestra{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}