/* =====================================================================
   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 */

  /* --- 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;
  gap: .5rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.one-barra__marca .one-punto{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--one-marca);
}

.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;
}

.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;
}

/* ---------------------------------------------------------------------
   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; }

  /* 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); }

/* ---------------------------------------------------------------------
   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.
   --------------------------------------------------------------------- */
.one-mapa{
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--one-line);
  border-radius: var(--one-radio);
  background: var(--one-bg);
}
.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; }