/* ═══════════════════════════════════════════════════════════════════
   ESTILO DE PRAXIA — capa de tema

   Va enlazada DESPUES del <style> de cada pagina, para ganarle sin tener
   que reescribir doce archivos. Si algun dia hay que volver atras, se
   quita el <link> de cada pagina y todo regresa a como estaba: por eso
   se hizo asi y no editando las reglas originales.

   La idea: superficie plana, trazo grueso, esquinas geometricas y nada
   de sombras difusas. El suelo es verde profundo -el mismo verde de
   Praxia en su tono mas oscuro- y encima van paneles claros.

   Regla que sostiene todo: sobre suelo hondo, los elementos van claros.
   Un elemento oscuro sobre fondo oscuro desaparece.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Los de Praxia, sin cambios */
  --primario:#2E7D32;
  --primario-claro:#7BC043;
  --primario-suave:#A8C99B;
  --ink:#1A1A1A;
  /* El gris de Praxia daba 4.29 de contraste sobre blanco, debajo del
     minimo de 4.5 para texto normal. Se oscurece lo justo para pasar sin
     que deje de leerse como texto secundario. */
  --gray:#666666;
  --gris:#666666;
  --err:#c62828;
  --ok:#2e7d32;

  /* Derivados para poder tener suelo firme */
  --hondo:#0C2412;
  --hondo-2:#14351C;
  --linea-honda:#081A0C;
  --hueso:#F7F9F6;
  --claro-verde:#EDF5EC;

  /* SUELO CLARO. Se intento hondo dos veces y las dos se echo atras. La
     razon, ya medida y no supuesta:

     Las pantallas de Praxia traen 97 clases con el color del texto escrito
     a mano -.eq-correo, .cob-etq, .plan-desc, .org-puesto...- contra solo
     53 con fondo propio. Un color escrito en una clase le gana a cualquier
     regla general de esta capa, asi que para aclararlos habria que
     nombrarlos uno por uno; y cada uno que se olvide queda tinta oscura
     sobre verde oscuro, o sea invisible, en una app donde se leen
     expedientes.

     Con suelo claro no hay nada que ganarle a nada: los 97 se quedan como
     estaban y se leen. El caracter del estilo lo dan la barra lateral
     honda, el trazo grueso, las esquinas geometricas y la ausencia total
     de sombras.

     Para tener el suelo hondo de verdad hay que editar el CSS de cada
     pantalla, no sobreponerle una capa. Es un trabajo aparte. */
  --bg:#EEF2ED;
  --line:#DDE4DB;

  --r:8px;
  --r-chico:6px;
  --r-pastilla:100px;
  --trazo:2.5px;
}

body{
  background:var(--bg) !important;
  /* El color del cuerpo NO se toca: sigue oscuro.
     El primer intento lo puso claro y entonces cada superficie clara de
     cada pantalla heredaba texto blanco sobre blanco. Habia decenas y no
     se acababan nunca.
     Ahora se aclara SOLO lo que de verdad esta parado sobre el suelo, que
     es un puñado de cosas por pantalla y se puede medir. Lo que se me
     escape queda oscuro sobre panel claro: legible. */
  color:var(--ink);
}

/* ── lo que esta parado sobre el suelo ───────────────────────────── */
/* TODO lo que hay dentro del area de contenido se aclara, sin excepciones
   y a cualquier profundidad. Luego las superficies claras lo devuelven a
   oscuro. Es al reves de como se intento antes.

   Por que asi: hay 97 clases con tinta oscura escrita a mano y solo 53
   con fondo claro. Aclarar todo y devolver 53 es una lista mas corta y
   -sobre todo- generada del CSS, no adivinada. Ir al reves obligaba a
   acertarle a 97 y cada omision era texto invisible sobre el suelo. */
/* (sin reglas de color: el suelo es claro y el texto se queda como estaba) */




/* Y en cuanto el texto entra a una superficie clara, vuelve a ser oscuro.
   Esta lista salio de recorrer el HTML buscando que elementos tienen fondo
   propio, no de adivinar: es el inventario completo de las cuatro
   pantallas grandes. */
/* .box, .caja y .paso NO van aqui: en varias pantallas son envoltorios
   transparentes que estan sobre el suelo, no tarjetas. Ponerlos dejaba el
   titulo "Entrar a Praxia" en tinta oscura sobre verde oscuro.

   La lista de abajo NO esta escrita a mano: sale de recorrer el CSS de las
   seis pantallas buscando toda regla que pinte fondo claro, incluidas las
   tarjetas que arma el JavaScript y que no existen en el marcado. La
   version anterior se hizo leyendo solo el HTML estatico y por eso se le
   fue .card-proxima: el nombre del paciente quedaba blanco sobre blanco. */
.atajo-consultorio, .auditoria-item, .aviso-futuro, .ayuda, .baja-caja,
.baja-pantalla, .bloque, .btn-claro, .btn-mini, .cal-dia, .cal-mes,
.cal-mes-cabecera, .cal-semana, .cal-semana-cabecera, .cal-vista-btn,
.campana-dropdown, .campo, .card, .card-dash, .card-proxima,
.card-proxima-pac, .chip, .chip-sug, .cifra, .cita, .cob-resumen,
.cob-tarjeta, .conectar-caja, .cr-fila-paciente, .cr-opcion, .disp-celda,
.disp-dia-header, .disp-grid, .disp-rango-personalizado, .doc-card,
.eq-busca, .eq-caja, .eq-liga, .eq-miembro, .eq-total, .exp-opcion,
.fila-usuario, .filtro-historial-btn, .grafica-card, .grid-resumen,
.hoja, .hora-btn, .imp-preview-box, .invite-box, .item-lista-clinica,
.kpi, .kpi-card, .modal, .modal-caja, .muro, .muro-caja, .notif-item,
.op, .org-nodo, .pac-btn, .pac-card, .pan-bloque, .pan-dia, .panel,
.permiso-caja, .pg-caja, .plan, .plan-caja, .plan-tarjeta, .plegable,
.politicas, .psi-box, .psi-perfil-card, .resultado-item,
.resultados-busqueda, .resumen, .solicitud, .subir-box, .tabla-scroll,
.tarjeta, .tarjeta-mi-id, .tarjeta-resumen, .topbar-stats,
.asignar-caja, .cob-precio-fila,
/* y todo lo que vaya adentro de ellas */
.atajo-consultorio *, .auditoria-item *, .aviso-futuro *, .ayuda *,
.baja-caja *, .bloque *, .cal-dia *, .cal-mes *, .cal-semana *,
.campana-dropdown *, .campo *, .card *, .card-dash *, .card-proxima *,
.card-proxima-pac *, .cifra *, .cita *, .cob-resumen *, .cob-tarjeta *,
.conectar-caja *, .cr-fila-paciente *, .cr-opcion *, .disp-grid *,
.doc-card *, .eq-busca *, .eq-caja *, .eq-liga *, .eq-miembro *,
.eq-total *, .exp-opcion *, .fila-usuario *, .grafica-card *,
.grid-resumen *, .hoja *, .imp-preview-box *, .invite-box *,
.item-lista-clinica *, .kpi *, .kpi-card *, .modal *, .modal-caja *,
.muro *, .muro-caja *, .notif-item *, .op *, .org-nodo *, .pac-card *,
.pan-bloque *, .panel *, .permiso-caja *, .pg-caja *, .plan *,
.plan-caja *, .plan-tarjeta *, .plegable *, .politicas *, .psi-box *,
.psi-perfil-card *, .resultado-item *, .resultados-busqueda *,
.resumen *, .solicitud *, .subir-box *, .tabla-scroll *, .tarjeta *,
.tarjeta-mi-id *, .tarjeta-resumen *, .topbar-stats *, .asignar-caja *{
  color:var(--ink);
}
/* Sus textos secundarios vuelven a gris, no al verde palido del suelo. */
.bloque .sub, .bloque .bh, .bloque .empty,
.card .sub, .card .bh, .panel .sub, .panel .bh, .plegable .bh,
.modal .sub, .modal .bh{
  color:var(--gray) !important;
}



/* "Atras" tiene fondo blanco: su texto va oscuro. Se le habia puesto claro
   por venir en la misma lista que los botones de texto suelto, y quedaba
   blanco sobre blanco. */
.btn-atras{
  background:#fff !important;
  color:var(--primario) !important;
  border:var(--trazo) solid var(--primario) !important;
}

/* Etiquetas y textos sueltos que quedan sobre el suelo en las pantallas de
   alta. Dentro de un panel se devuelven a gris mas abajo. */
.bloque label, .card label, .modal label, .panel label, .plegable label,
.bloque .pista, .card .pista{color:var(--gray) !important;}



/* ── barra lateral ───────────────────────────────────────────────── */
.sidebar{
  background:var(--hondo-2) !important;
  border-right:var(--trazo) solid var(--linea-honda) !important;
}
/* El logotipo de Praxia es negro sobre transparente: sobre la barra honda
   la palabra "Praxia" desaparecia. Se invierte a blanco. Es la misma
   solucion que ya usaba el panel de administracion. */
.sidebar img, .sidebar-logo img{
  filter:brightness(0) invert(1);
}
.sidebar-nav button,
nav.sidebar-nav button{
  color:var(--primario-suave) !important;
  border:var(--trazo) solid transparent !important;
  border-radius:var(--r) !important;
  font-weight:700;
}
.sidebar-nav button:hover,
nav.sidebar-nav button:hover{
  background:var(--hondo) !important;
  color:var(--hueso) !important;
}
.sidebar-nav button.active,
nav.sidebar-nav button.active{
  background:var(--primario-claro) !important;
  border-color:var(--primario-claro) !important;
  color:var(--hondo) !important;
  font-weight:800;
}

/* Lo que vive en la barra lateral fuera del menu: nombre, rol, botones. */
.sidebar .perfil-nombre,
.sidebar .perfil-rol,
.sidebar h1, .sidebar h2, .sidebar p, .sidebar span{
  color:var(--hueso);
}
.sidebar .perfil-rol{color:var(--primario-suave);}
/* La ficha de usuario al pie de la barra: sobre fondo hondo tenia que ir
   clara y estaba quedando en gris de fondo claro. */
.sidebar-user-nombre, .sidebar-avatar{color:var(--hueso) !important;}
.sidebar-user-rol{color:var(--primario-suave) !important;}
.sidebar-avatar{background:var(--primario) !important;}
.btn-salir{
  color:var(--primario-suave) !important;
  border-color:var(--primario-suave) !important;
  background:transparent !important;
}
.btn-salir:hover{color:var(--err) !important;border-color:var(--err) !important;}

/* ── texto sobre el suelo ────────────────────────────────────────── */
/* El modelo es simple: por omision el texto va claro, porque el suelo es
   hondo. Adentro de un panel claro se vuelve oscuro otra vez.
   Enumerar padres uno por uno no funcionaba: cada pantalla envuelve su
   contenido distinto y siempre quedaba alguna con tinta oscura sobre
   verde oscuro. */
/* El texto se queda como estaba: oscuro sobre claro. No hay reglas de
   color aqui a proposito. Cada una que se agregara seria una que habria
   que acertar en doce pantallas. */

/* La tarjeta destacada de la app va en verde y no debe volverse panel. */
.tarjeta.destacada{
  background:var(--primario) !important;
  border-color:var(--primario) !important;
  color:#fff !important;
}
.tarjeta.destacada .t-titulo,
.tarjeta.destacada .t-detalle{color:#fff !important;}
/* El verde palido de la etiqueta daba 3.87 sobre el verde primario. */
.tarjeta.destacada .t-etq{color:#DFF0DD !important;}
.tarjeta.destacada .btn-claro{
  background:#fff !important;color:var(--primario) !important;border-color:#fff !important;
}

/* ── paneles ─────────────────────────────────────────────────────── */
/* .caja NO va aqui a proposito: en registro-psicologo es el contenedor de
   toda la pantalla, no una tarjeta, y pintarlo de claro convertia el fondo
   entero en un panel. */
.bloque, .card, .tarjeta, .panel,
.fila-usuario, .modal, .modal-caja{
  background:var(--hueso) !important;
  color:var(--ink);
  border:var(--trazo) solid var(--hueso) !important;
  border-radius:var(--r) !important;
  box-shadow:none !important;
}
.bloque h2, .bloque h3, .bloque h4,
.card h2, .card h3, .card h4{color:var(--ink) !important;}
.bloque .bh, .bloque .sub, .card .bh{color:var(--gray) !important;}

/* ── botones ─────────────────────────────────────────────────────── */
.btn, button.btn{
  border-radius:var(--r) !important;
  box-shadow:none !important;
  font-weight:800;
  border:var(--trazo) solid transparent;
}
.btn-primary, .btn-primario{
  background:var(--primario) !important;
  border-color:var(--primario) !important;
  color:var(--hueso) !important;
}
.btn-primary:hover, .btn-primario:hover{
  background:var(--primario-claro) !important;
  border-color:var(--primario-claro) !important;
  color:var(--hondo) !important;
}
.btn-ghost, .btn-linea, .btn-fantasma, .btn-secundario{
  background:transparent !important;
  border:var(--trazo) solid var(--primario) !important;
  color:var(--primario) !important;
}
.btn-danger, .btn-peligro{
  background:transparent !important;
  border:var(--trazo) solid var(--err) !important;
  color:var(--err) !important;
}

/* ── campos ──────────────────────────────────────────────────────── */
input, select, textarea{
  border:var(--trazo) solid var(--line) !important;
  border-radius:var(--r-chico) !important;
  box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--primario) !important;
  outline:none !important;
}

/* ── pestañas ────────────────────────────────────────────────────── */
nav.tabs:not(.sidebar-nav) button{
  border-radius:var(--r) !important;
  border:var(--trazo) solid var(--primario) !important;
  background:var(--primario) !important;
  color:var(--hueso) !important;
  font-weight:800;
}
nav.tabs:not(.sidebar-nav) button.active{
  background:var(--hueso) !important;
  color:var(--primario) !important;
}

/* El menu del expediente NO son pestañas: es una columna de secciones con su
   propio diseño -texto plano y una linea a la izquierda para la activa-. La
   regla de arriba se escribio para las tiras horizontales, pero tambien lo
   agarraba, y con doce secciones lo dejaba como un muro de botones verdes.
   Se le devuelve su aspecto de menu. */
.exp-menu nav.tabs button{
  background:none !important;
  border:none !important;
  border-left:3px solid transparent !important;
  border-radius:8px !important;
  color:var(--gray) !important;
  font-weight:700;
}
.exp-menu nav.tabs button:hover{
  background:var(--claro-verde,#EDF5EC) !important;
  color:var(--primario) !important;
}
.exp-menu nav.tabs button.active{
  background:var(--claro-verde,#EDF5EC) !important;
  border-left-color:var(--primario) !important;
  color:var(--primario) !important;
  font-weight:800;
}
/* En pantalla angosta el menu vuelve a ser una tira: ahi la marca de la
   seccion activa va abajo, no a la izquierda. */
@media(max-width:1000px){
  .exp-menu nav.tabs button{
    border-left:none !important;
    border-bottom:2.5px solid transparent !important;
    border-radius:8px 8px 0 0 !important;
  }
  .exp-menu nav.tabs button.active{
    border-left:none !important;
    border-bottom-color:var(--primario) !important;
  }
}

/* ── datos y etiquetas ───────────────────────────────────────────── */
/* El bloque de dato es el corazon del estilo: numero grande, etiqueta
   chica en mayusculas, y un cuadro en la esquina como firma. */
.card-dash, .eq-total, .cob-tarjeta, .mock-stat{
  background:var(--hueso) !important;
  border:var(--trazo) solid var(--hueso) !important;
  border-radius:var(--r) !important;
  padding:18px 20px !important;
  text-align:left !important;
}
.card-dash-num, .eq-total-num{
  font-weight:900 !important;letter-spacing:-1px;color:var(--ink) !important;
  line-height:1 !important;
}
.card-dash-label, .eq-total-etq{
  font-weight:800 !important;text-transform:uppercase;letter-spacing:.6px;
  color:var(--gray) !important;font-size:10.5px !important;margin-top:7px !important;
  /* Sin recorte: la etiqueta puede ocupar dos renglones antes que cortarse.
     "COBRADO ESTE ME" no es una etiqueta, es un error. */
  white-space:normal !important;overflow:visible !important;line-height:1.35 !important;
}

/* Avatares de iniciales: iban en blanco sobre verde palido, que da 1.83 de
   contraste. Es un problema que ya existia; se arregla de paso porque las
   iniciales son como se distingue a un paciente de otro en las listas. */
.eq-avatar, .perfil-foto-preview, .foto-preview,
.sidebar-avatar, .avatar, .org-avatar{
  color:var(--hondo) !important;
  font-weight:800 !important;
}
.sidebar-avatar{color:var(--hueso) !important;}

.etq, .tag, .chip, .eq-rol, .eq-acceso{
  border-radius:var(--r-chico) !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

/* Insignias: casi todas venian con el texto del mismo tono que su fondo
   palido y quedaban entre 3.8 y 4.45 de contraste, debajo del minimo de
   4.5. Se oscurece el texto sin tocar el fondo, asi que siguen leyendose
   como insignias de color pero ya se distinguen. Es un arreglo viejo que
   se hace de paso. */
.tag.aprobado, .ta-etq.aprobado, .etq.confirmada, .tag.confirmada,
.pac-estado-tag, .eq-acceso.si, .etq.completada{
  color:#17591C !important;
}
.tag.pendiente, .ta-etq.pendiente, .etq.pendiente_pago, .tag.pendiente_pago,
.badge-proximamente, .pac-sin-cuenta-tag{
  color:#7A4E00 !important;
}
.etq.pendiente_aprobacion{color:#33338F !important;}
/* La insignia de superadministrador iba en verde limon sobre negro: 2.10.
   Se pasa a fondo limon con texto hondo, que ademas la hace resaltar mas,
   que es justo lo que debe hacer. */
.badge-superadmin{
  background:var(--primario-claro) !important;
  color:var(--hondo) !important;
}
.tag.rechazado, .ta-etq.rechazado, .ta-etq.suspendido, .tag.suspendido{
  color:#A31515 !important;
}
/* Los chips del calendario iban en verde palido sobre verde palido. */
.cal-evento-chip{color:#17591C !important;}
.cal-evento-chip.cancelada{color:#8A8A8A !important;}
.cal-dia.fuera-de-mes .cal-dia-num{color:#666D68 !important;}

/* ── organigrama ─────────────────────────────────────────────────── */
.org-nodo{
  border-width:var(--trazo) !important;
  border-color:var(--ink) !important;
  border-radius:var(--r-pastilla) !important;
}
.org-nodo.jefe{border-color:var(--primario) !important;}
.org-conector, .org-hijos{border-color:var(--ink) !important;}
.org-hijos .org-nodo::before{background:var(--ink) !important;}

/* ── encabezado superior ─────────────────────────────────────────── */
header.barra-superior, .topbar, .cinta-superior{
  background:var(--hondo-2) !important;
  border-bottom:var(--trazo) solid var(--linea-honda) !important;
  color:var(--hueso);
}

/* ── el panorama lateral de Mi consultorio ───────────────────────── */
.consultorio-lado .bloque{background:var(--hueso) !important;}
.pan-dia.hoy{background:var(--primario) !important;color:var(--hueso) !important;}
/* Los dias del mes vecino iban en gris casi blanco: se ven apagados,
   pero deben poder leerse. */
.pan-dia.fuera, .cal-dia.fuera-de-mes{color:#666D68 !important;}
.pan-dia .punto{background:var(--primario-claro) !important;}
.pan-dia.hoy .punto{background:var(--hueso) !important;}

/* ── encabezado de Mi consultorio ────────────────────────────────── */
.consultorio-logo-preview{
  border-radius:var(--r) !important;
  border:var(--trazo) solid var(--hueso) !important;
}

/* ── atajos ──────────────────────────────────────────────────────── */
/* Van claros porque estan sobre el suelo hondo. */
.atajo-consultorio{
  background:var(--claro-verde) !important;
  border:var(--trazo) solid var(--claro-verde) !important;
  border-radius:var(--r) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
.atajo-consultorio:hover{border-color:var(--primario) !important;}
.atajo-consultorio .ac-icono{color:var(--primario);}
.ac-texto{font-weight:800 !important;}

/* ── barra de busqueda del equipo ────────────────────────────────── */
.eq-busca input{border-color:var(--ink) !important;background:#fff !important;}
.eq-vistas{border:var(--trazo) solid var(--hueso) !important;border-radius:var(--r) !important;}

/* ── bloques plegables ───────────────────────────────────────────── */
.plegable > summary:hover{background:var(--claro-verde) !important;}
.plegable[open] > summary{border-bottom:var(--trazo) solid var(--claro-verde) !important;}

/* ── nada de sombras difusas en ningun lado ──────────────────────── */
*{box-shadow:none !important;}