/* Tema de marca: Alianza Jurídica 927.
   Se carga después de styles.css y solo redefine colores, así las mejoras del proyecto base se pueden
   copiar tal cual (styles.css, app.js) sin perder la identidad visual.

   Paleta:
     Verde 927        #A4CE3A  acento, botones, detalles
     Gris 927         #35363A  texto y fondos oscuros
     Blanco           #FFFFFF  fondo principal
     Castaño hormiga  #6B3A32  solo dentro del logo
   El verde sobre blanco no alcanza contraste suficiente para texto pequeño, por eso los enlaces usan
   un verde oscurecido (#4F6F14) y los botones verdes llevan el texto en Gris 927. */

:root {
  --verde927: #A4CE3A;
  --verde927-oscuro: #8DB52A;
  --verde927-suave: #EEF6D9;
  --gris927: #35363A;
  --castano927: #6B3A32;
  --enlace: #4F6F14;
  --fondo: #FFFFFF;
  --panel: #FFFFFF;
  --borde: #D9DBDF;
  --texto: #35363A;
  --texto-suave: #5D5F64;
  --primario: #35363A;
  --primario-oscuro: #1F2023;
  --fondo-pronto: #EEF6D9;
}

body { background: #FFFFFF; }
a { color: var(--enlace); }

/* barra superior: gris 927 con acentos verdes; el castaño solo en el distintivo del logo */
.barra { background: var(--gris927); }
.barra .marca .logo927 {
  display: inline-block; background: var(--castano927); color: #FFFFFF; border-radius: 6px;
  padding: 0 7px; margin-left: 4px; font-weight: 800; letter-spacing: 0.02em;
}
.barra nav a.activo, .barra nav a:hover { background: rgba(164, 206, 58, 0.16); color: var(--verde927); }
.btn-claro { border-color: rgba(164, 206, 58, 0.7); }
.btn-claro:hover { background: var(--verde927); border-color: var(--verde927); color: var(--gris927); }

/* botones y controles principales */
.btn-primario { background: var(--verde927); border-color: var(--verde927); color: var(--gris927); }
.btn-primario:hover { background: var(--verde927-oscuro); border-color: var(--verde927-oscuro); color: var(--gris927); }
.chip-filtro.activo { background: var(--verde927); border-color: var(--verde927); color: var(--gris927); }
.tabs { border-bottom-color: #E3E5E8; }
.tabs button.activo { color: var(--gris927); border-bottom-color: var(--verde927); }
.buscador input:focus, .campo input:focus, .campo select:focus, .campo textarea:focus,
.fila-parte input:focus, .fila-parte select:focus { outline: 2px solid var(--verde927); border-color: var(--verde927-oscuro); }
.btn:focus-visible, .btn-enlace:focus-visible, .chip-filtro:focus-visible, a:focus-visible, .tabs button:focus-visible {
  outline: 3px solid var(--verde927); outline-offset: 2px;
}
.selector-estado.estado-activo, .chip.estado-activo, .chip.cliente, .chip.origen { background: var(--verde927-suave); color: #3D5A0C; border-color: #CFE39A; }
.chip.tipo, .chip.abogado { background: #ECECEE; color: var(--gris927); }
.vence.pronto { color: var(--enlace); }
.item-agenda.pronto { border-left-color: var(--verde927); }
.aviso-inline { background: var(--verde927-suave); border-color: #CFE39A; }

/* paneles */
.encabezado { border-top: 4px solid var(--verde927); }
.panel-cabecera, .tabla th { background: #F6F7F3; }
.tabla tr[data-href]:hover { background: #F7FAEE; }
.tarjeta .numero { color: var(--gris927); }
.tarjeta.alerta .numero { color: var(--peligro); }
.modal h2 { border-bottom: 3px solid var(--verde927); }
#toast { background: var(--gris927); }
.login { border-top: 6px solid var(--verde927); }

/* lectura en voz alta: verde de marca para escuchar, rojo para detener */
.btn-narrar { background: var(--verde927); color: var(--gris927); }
.btn-narrar:hover { background: var(--verde927-oscuro); }
.btn-narrar.activo { background: var(--peligro); color: #FFFFFF; }
.btn-narrar.activo:hover { background: #8F1E18; }
.btn-escuchar { background: var(--verde927); border-color: var(--verde927); color: var(--gris927); }
.btn-escuchar:hover { background: var(--verde927-oscuro); }
.panel-narracion { border-color: var(--gris927); }

/* logo oficial en la barra y en la pantalla de ingreso */
.marca { display: inline-flex; align-items: center; }
.logo-marca { width: 34px; height: 34px; margin-right: 8px; flex: none; }
/* el contenedor genérico es una caja de 64 px con fondo; con el logo oficial se vuelve libre para que no se monte sobre el nombre */
.login-marca { width: auto; height: auto; background: none; border-radius: 0; margin: 0 auto 10px; }
.login-marca .logo-login { display: block; width: 120px; height: 120px; margin: 0 auto; }
.login h1, .login p { text-align: center; }

/* modo visión reducida */
body.accesible { --primario: #35363A; --borde: #444444; --texto-suave: #35363A; }
body.accesible :focus-visible { outline: 4px solid var(--verde927); }
body.accesible .logo-marca { width: 42px; height: 42px; }

/* v1.2: elementos nuevos de la interfaz (avatar del usuario, tablero, avisos) */
.avatar { background: var(--verde927); color: var(--gris927); }
.btn-usuario { border-color: rgba(164, 206, 58, 0.5); }
.btn-usuario:hover { background: rgba(164, 206, 58, 0.18); }
.tarjeta-rapida:hover { border-color: var(--verde927); }
.tarjeta-rapida .ico { color: var(--enlace); }
.zona-arrastre:hover, .zona-arrastre.activa { border-color: var(--verde927); background: var(--verde927-suave); }
.zona-arrastre .ico-grande { color: var(--enlace); }