/* Legajo · paleta del despacho (navy, oro y crema), como el prototipo de «Hoy». */

:root {
  --navy: #14213D;
  --navy-2: #23335A;
  --navy-3: #1B2A4D;
  --navy-borde: #2A3A60;
  --oro: #C9A15E;
  --oro-texto: #7A5A26;
  --oro-fondo: #F2E7CF;
  --crema: #F6F1E6;
  --papel: #FFFDF8;
  --blanco: #FFFFFF;
  --borde: #E2DACB;
  --borde-suave: #EDE6D8;
  --borde-fuerte: #D8CFBD;
  --texto: #14213D;
  --texto-2: #3C4460;
  --texto-3: #4A5270;
  --tenue: #6B7185;
  --en-navy: #D5D9E4;
  --en-navy-tenue: #AEB4C6;
  --rojo: #9A3328;
  --rojo-texto: #7A2A21;
  --rojo-fondo: #FBEDEA;
  --ambar: #7E5210;
  --ambar-fondo: #FBF1DE;
  --verde: #2F6B4B;
  --verde-fondo: #E4F0E8;
  --azul-fondo: #E3E6EF;
  --gris-fondo: #ECEAE4;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --radio: 10px;
  --radio-grande: 14px;
  --sombra: 0 6px 16px rgba(20, 33, 61, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--crema);
}

a { color: var(--oro-texto); text-decoration: none; }
a:hover { color: var(--texto); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

[hidden] { display: none !important; }

h1, h2, h3 { font-weight: 500; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 12px; top: -48px; z-index: 50;
  background: var(--navy); color: var(--papel); padding: 8px 14px; border-radius: 8px;
}
.saltar:focus { top: 12px; }

.franja-aviso {
  background: var(--oro); color: var(--navy);
  font-size: 13px; font-weight: 500; text-align: center; padding: 6px 16px;
}

.icono { flex-shrink: 0; }

/* ── Marco general ─────────────────────────────────────────────────────── */

.marco { display: flex; min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh; width: 248px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 28px;
  padding: 28px 16px 24px;
  background: var(--navy); color: var(--en-navy);
}

.marca { display: flex; align-items: center; gap: 12px; padding: 0 12px; color: inherit; }
.marca:hover { text-decoration: none; color: inherit; }
.marca-logo {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--oro); color: var(--navy);
  font-family: var(--serif); font-size: 22px; font-weight: 600;
}
.marca-texto { display: flex; flex-direction: column; }
.marca-nombre { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--papel); line-height: 1; }
.marca-despacho { font-size: 12px; color: var(--en-navy-tenue); margin-top: 4px; }

.lateral-enlaces, .lateral-pie { display: flex; flex-direction: column; gap: 2px; }
.lateral-enlaces { flex-grow: 1; }
.lateral-pie { gap: 14px; }

.lateral a[data-seccion] {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--en-navy); font-size: 15px;
}
.lateral a[data-seccion]:hover { background: var(--navy-3); text-decoration: none; color: var(--papel); }
.lateral a[aria-current=page] { background: var(--navy-2); color: var(--papel); font-weight: 500; }
.lateral a[aria-current=page] svg { color: var(--oro); }

.lateral-estado {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--navy-3); font-size: 12px; color: var(--en-navy-tenue);
}
.lateral-estado svg { color: var(--oro); }

.columna { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.barra-superior {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 48px 0;
}

.marca-movil { display: none; }

.buscador {
  flex-grow: 1; display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto-3);
}
.buscador:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 161, 94, 0.25); }
.buscador input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; color: var(--texto); }
.buscador input::placeholder { color: var(--tenue); }
.buscador kbd {
  font-family: var(--sans); font-size: 12px; color: var(--texto-3);
  border: 1px solid var(--borde); border-radius: 6px; padding: 2px 7px;
}

.vista { flex-grow: 1; padding: 28px 48px 48px; outline: none; max-width: 1280px; width: 100%; }

.fab, .inferior { display: none; }

/* ── Botones ───────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radio);
  border: 1px solid transparent; cursor: pointer;
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  text-decoration: none;
}
.boton:hover { text-decoration: none; }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton-oro { background: var(--oro); color: var(--navy); font-weight: 600; }
.boton-oro:hover { background: #BF9550; color: var(--navy); }
.boton-primario { background: var(--navy); color: var(--papel); }
.boton-primario:hover { background: var(--navy-2); color: var(--papel); }
.boton-secundario { background: var(--papel); color: var(--texto); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: var(--blanco); border-color: var(--texto-3); color: var(--texto); }
.boton-peligro { background: var(--rojo); color: var(--blanco); }
.boton-peligro:hover { background: #82291F; color: var(--blanco); }
.boton-nuevo { height: 48px; flex-shrink: 0; }

.boton-icono {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-3); cursor: pointer;
}
.boton-icono:hover { background: var(--rojo-fondo); color: var(--rojo); }

.boton-enlace {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  border: 0; background: none; padding: 6px 0; cursor: pointer;
  color: var(--oro-texto); font-weight: 500; font-size: 14px;
}
.boton-enlace:hover { color: var(--texto); text-decoration: underline; }

/* ── Cabeceras y tarjetas ──────────────────────────────────────────────── */

.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.titulo { margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.08; }
.titulo-grande { font-size: 48px; }
.subtitulo { margin: 6px 0 0; color: var(--texto-3); font-size: 15px; }
.antetitulo { margin: 0 0 6px; color: var(--texto-3); font-size: 14px; letter-spacing: 0.02em; }

.volver {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 14px; font-size: 14px; font-weight: 500;
}

.tarjeta {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 24px; margin: 0;
}
.tarjeta h2, .tarjeta legend {
  margin: 0 0 14px; padding: 0;
  font-family: var(--serif); font-size: 24px; font-weight: 500;
}
.tarjeta-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tarjeta-cabecera h2 { margin: 0; }
.tarjeta-navy { background: var(--navy); border-color: var(--navy); color: var(--en-navy); }
.tarjeta-navy h2 { color: var(--papel); }
.tarjeta.pendiente { border-style: dashed; background: transparent; }
.tarjeta.pendiente p { margin: 10px 0 0; }

.texto-tenue { color: var(--texto-3); }
.texto-suave { color: var(--en-navy-tenue); }
.dato-mono { font-family: var(--mono); font-size: 0.93em; letter-spacing: 0.02em; }
.centrado { text-align: center; }

.vacio { padding: 48px 16px; text-align: center; color: var(--texto-2); }
.vacio .titulo { margin-bottom: 12px; }

/* ── Chips, etiquetas y avatares ───────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.chip-verde { background: var(--verde-fondo); color: var(--verde); }
.chip-oro { background: var(--oro-fondo); color: var(--oro-texto); }
.chip-rojo { background: var(--rojo-fondo); color: var(--rojo); }
.chip-azul { background: var(--azul-fondo); color: var(--navy); }
.chip-gris { background: var(--gris-fondo); color: var(--texto-3); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--texto-3);
  border: 1px solid var(--borde); border-radius: 999px; padding: 2px 9px;
  background: var(--blanco);
}
.etiqueta::before { content: '#'; color: var(--oro); }
a.etiqueta:hover { border-color: var(--oro); text-decoration: none; color: var(--texto); }

.avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--azul-fondo); color: var(--navy);
}
.avatar-juridica { border-radius: 10px; background: var(--oro-fondo); color: var(--oro-texto); }
.avatar-grande { width: 72px; height: 72px; font-size: 24px; font-family: var(--serif); font-weight: 500; }
.avatar-grande.avatar-juridica { border-radius: 16px; }

/* ── Lista de contactos ────────────────────────────────────────────────── */

.filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.campo-busqueda {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto-3);
}
.campo-busqueda:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 161, 94, 0.25); }
.campo-busqueda input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--texto); }

.filtros-selects { display: flex; gap: 12px; flex-wrap: wrap; }
.filtros select, .form-linea select, .form-relacion select {
  height: 46px; padding: 0 36px 0 12px; border-radius: var(--radio);
  border: 1px solid var(--borde); background-color: var(--papel);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5270' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.chips-filtro {
  flex-basis: 100%; display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: thin;
}
.chips-filtro button {
  flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--papel); color: var(--texto-2);
  font-size: 14px; cursor: pointer;
}
.chips-filtro button:hover { border-color: var(--texto-3); }
.chips-filtro button[aria-pressed=true] { background: var(--navy); border-color: var(--navy); color: var(--papel); font-weight: 500; }

.resultados[aria-busy=true] { opacity: 0.55; transition: opacity 0.15s 0.1s; }

.lista-contactos {
  list-style: none; margin: 0; padding: 0;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  overflow: hidden;
}
.lista-contactos li + li { border-top: 1px solid var(--borde-suave); }

.fila-contacto {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 40px minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.8fr) minmax(0, 1.2fr);
  padding: 14px 20px; color: var(--texto);
}
.fila-contacto:hover { background: var(--blanco); text-decoration: none; color: var(--texto); }
.fila-contacto.bloqueado { opacity: 0.65; }
.fila-principal, .fila-contacto-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila-nombre { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-sub, .fila-contacto-datos { font-size: 13px; color: var(--texto-3); }
.fila-sub { font-family: var(--mono); font-size: 12.5px; }
.fila-contacto-datos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Hoy ───────────────────────────────────────────────────────────────── */

.cabecera-hoy { margin-bottom: 28px; }
.rejilla-hoy { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tarjeta-navy p { margin: 0 0 10px; line-height: 1.55; }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li + li { border-top: 1px solid var(--borde-suave); }
.enlace-contacto { display: flex; align-items: center; gap: 12px; color: var(--texto); min-width: 0; }
.enlace-contacto:hover { text-decoration: none; color: var(--texto); }
.enlace-contacto:hover .enlace-contacto-nombre, .enlace-contacto:hover > span:last-child { text-decoration: underline; }
.lista-simple .enlace-contacto { padding: 12px 0; }
.enlace-contacto-texto { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; font-size: 13px; }
.enlace-contacto-nombre { font-size: 15px; font-weight: 600; }

.lista-enlaces { padding: 8px 24px; display: flex; flex-direction: column; }
.lista-enlaces a {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 52px; color: var(--texto); font-size: 16px;
}
.lista-enlaces a + a { border-top: 1px solid var(--borde-suave); }

/* ── Ficha ─────────────────────────────────────────────────────────────── */

.ficha-cabecera { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.ficha-titulo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ficha-titulo .subtitulo { margin: 0; }
.ficha-acciones { display: flex; gap: 10px; flex-shrink: 0; align-self: flex-start; }

.ficha-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ficha-columna { display: flex; flex-direction: column; gap: 24px; }

.banda {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--radio); margin-bottom: 24px;
}
.banda > .icono { margin-top: 2px; }
.banda > div { flex-grow: 1; min-width: 0; }
.banda-bloqueo { background: var(--gris-fondo); color: var(--texto-2); border: 1px solid var(--borde-fuerte); }
.banda-aviso { background: var(--ambar-fondo); color: var(--ambar); border: 1px solid #EBD3A5; }
.banda-aviso strong { color: #5E3D0A; }
.banda-acciones { margin-top: 12px; }

.lista-medios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lista-medios li { display: flex; gap: 12px; align-items: flex-start; }
.lista-medios .icono { color: var(--oro); margin-top: 2px; }
.lista-medios a { word-break: break-all; }

.lista-filas { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-filas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.lista-filas li + li { border-top: 1px solid var(--borde-suave); }
.fila-texto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; font-size: 14px; }
.fila-texto .enlace-contacto { gap: 8px; font-weight: 500; }
.fila-texto .avatar { width: 28px; height: 28px; font-size: 11px; }
.fila-texto .avatar .icono { width: 14px; height: 14px; }

.form-linea, .form-relacion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.form-linea input, .form-relacion input {
  height: 46px; padding: 0 12px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--blanco); min-width: 0;
}
.form-linea input { width: 150px; }

.selector-contacto { position: relative; flex: 1 1 200px; }
.selector-contacto input { width: 100%; }
.selector-opciones {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: 4px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); max-height: 280px; overflow-y: auto;
}
.selector-opciones li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.selector-opciones li[aria-selected=true] { background: var(--crema); }
.selector-opciones .sin-opciones { color: var(--texto-3); cursor: default; }

.datos { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dato { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.dato dt { color: var(--texto-3); }
.dato dd { margin: 0; }

.nota-aviso {
  display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0;
  font-size: 13px; color: var(--ambar); background: var(--ambar-fondo);
  padding: 10px 12px; border-radius: 8px;
}
.nota-aviso .icono { margin-top: 1px; }

.notas { margin: 0; white-space: pre-wrap; line-height: 1.55; }

.dialogo {
  border: 0; border-radius: var(--radio-grande); padding: 0;
  max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(20, 33, 61, 0.3);
  background: var(--papel); color: var(--texto);
}
.dialogo::backdrop { background: rgba(20, 33, 61, 0.45); }
.dialogo form { padding: 24px; }
.dialogo h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 26px; }
.dialogo p { margin: 0 0 16px; color: var(--texto-2); line-height: 1.55; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ── Formulario ────────────────────────────────────────────────────────── */

.formulario { display: flex; flex-direction: column; gap: 20px; max-width: 920px; }
.formulario fieldset { min-width: 0; }
.formulario legend { float: left; width: 100%; }
.formulario legend + * { clear: left; }

.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo-etiqueta { font-size: 14px; font-weight: 500; color: var(--texto-2); }
.campo-etiqueta abbr { color: var(--rojo); text-decoration: none; }

.campo input, .campo select, .campo textarea, .telefono input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--blanco);
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo select { cursor: pointer; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .telefono input:focus,
.form-linea input:focus, .form-relacion input:focus, .form-linea select:focus, .form-relacion select:focus {
  outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 161, 94, 0.25);
}
[aria-invalid=true] { border-color: var(--rojo) !important; }

.campo-ayuda { font-size: 13px; color: var(--texto-3); min-height: 0; }
.campo-ayuda:empty { display: none; }
.ayuda-ok { color: var(--verde); }
.ayuda-error { color: var(--rojo); }
.campo-error { margin: 0; font-size: 13px; font-weight: 500; color: var(--rojo); }
.error-general { padding: 12px 16px; border-radius: var(--radio); background: var(--rojo-fondo); }

.segmentado {
  display: inline-flex; padding: 4px; margin-bottom: 18px;
  background: var(--crema); border: 1px solid var(--borde); border-radius: 12px;
}
.segmentado label { position: relative; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmentado span {
  display: flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--texto-3);
}
.segmentado input:checked + span { background: var(--navy); color: var(--papel); }
.segmentado input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }

.telefonos { display: flex; flex-direction: column; gap: 8px; }
.telefono { display: flex; gap: 6px; align-items: center; }

.casillas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.casilla { position: relative; cursor: pointer; }
.casilla input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.casilla span {
  display: flex; align-items: center; height: 38px; padding: 0 14px;
  border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--blanco);
  font-size: 14px; color: var(--texto-2);
}
.casilla input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--papel); }
.casilla input:checked + span::before { content: '✓'; margin-right: 6px; color: var(--oro); font-weight: 600; }
.casilla input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.colegiacion { margin-bottom: 16px; }

.etiquetas-editor {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 46px; padding: 6px 8px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--blanco);
}
.etiquetas-editor:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 161, 94, 0.25); }
.etiquetas-actuales { display: contents; }
.etiquetas-editor input { flex: 1 1 140px; min-width: 0; border: 0; outline: none; padding: 6px 4px; background: transparent; }
.etiqueta-editable { padding-right: 4px; }
.etiqueta-editable button {
  display: inline-flex; border: 0; background: none; padding: 2px; border-radius: 50%;
  color: var(--texto-3); cursor: pointer;
}
.etiqueta-editable button:hover { background: var(--rojo-fondo); color: var(--rojo); }

.con-boton { display: flex; gap: 8px; }
.con-boton input { flex-grow: 1; }

.panel-duplicados .banda { margin: 0; }
.duplicados-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.duplicados-lista li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; background: var(--papel); color: var(--texto);
}
.duplicados-lista .avatar { width: 32px; height: 32px; font-size: 12px; }
.duplicado-datos { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; font-size: 13px; }
.duplicado-datos a { font-size: 15px; font-weight: 600; }
.duplicado-motivos { font-size: 12px; font-weight: 600; color: var(--ambar); text-align: right; }

.barra-acciones {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 16px 0; background: linear-gradient(to top, var(--crema) 70%, rgba(246, 241, 230, 0));
}

/* ── Avisos flotantes ──────────────────────────────────────────────────── */

.avisos {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.aviso-flotante {
  padding: 12px 18px; border-radius: var(--radio); box-shadow: var(--sombra);
  background: var(--navy); color: var(--papel); font-size: 14px; font-weight: 500;
  animation: entrar 0.2s ease-out;
}
.aviso-error { background: var(--rojo); }
.aviso-flotante.saliendo { opacity: 0; transition: opacity 0.35s; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ── Permisos: lo que el rol no permite, no se muestra ───────────────────── */

body:not([data-permisos~="contactos.editar"]) [data-requiere="contactos.editar"],
body:not([data-permisos~="administracion"]) [data-requiere="administracion"] { display: none !important; }

/* ── Entrada (sin sesión) ──────────────────────────────────────────────── */

.sin-sesion .lateral, .sin-sesion .barra-superior, .sin-sesion .inferior, .sin-sesion .fab { display: none !important; }
.sin-sesion .vista { max-width: none; padding: 0; }

.acceso {
  min-height: calc(100vh - 32px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 40px 16px;
  background: radial-gradient(ellipse at top, var(--papel), var(--crema) 70%);
}
.acceso-marca { display: flex; align-items: center; gap: 14px; }
.acceso-marca .marca-logo { width: 48px; height: 48px; font-size: 28px; border-radius: 12px; }
.acceso-marca .marca-nombre { color: var(--navy); font-size: 34px; }
.acceso-despacho { font-size: 13px; color: var(--texto-3); margin-top: 4px; }
.acceso-tarjeta { width: min(440px, 100%); padding: 32px; box-shadow: var(--sombra); }
.acceso-titulo { margin: 0 0 12px; font-family: var(--serif); font-size: 32px; font-weight: 500; }
.acceso-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.acceso-ayuda { margin: 20px 0 0; font-size: 13px; }
.acceso-pie { margin: 0; font-size: 12px; color: var(--texto-3); }
.boton-bloque { width: 100%; }

/* ── Usuario en la barra lateral ───────────────────────────────────────── */

.lateral-usuario { display: flex; align-items: center; gap: 4px; }
.lateral a.lateral-cuenta {
  flex-grow: 1; min-width: 0; height: auto; padding: 8px 10px; gap: 10px;
}
.lateral-cuenta-texto { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.25; }
.lateral-cuenta-texto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-rol { font-size: 12px; color: var(--en-navy-tenue); }
.avatar-usuario { background: var(--oro-fondo); color: var(--oro-texto); }
.lateral .avatar-usuario { width: 34px; height: 34px; font-size: 12px; background: var(--oro); color: var(--navy); }
.lateral-salir {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--en-navy-tenue); cursor: pointer;
}
.lateral-salir:hover { background: var(--navy-3); color: var(--papel); }

/* ── Administración ────────────────────────────────────────────────────── */

.pestanas {
  display: flex; gap: 4px; overflow-x: auto; margin: -8px 0 24px; padding-bottom: 2px;
  border-bottom: 1px solid var(--borde); scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex-shrink: 0; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -3px;
  color: var(--texto-3); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.pestanas a:hover { color: var(--texto); text-decoration: none; border-bottom-color: var(--borde-fuerte); }
.pestanas a[aria-current=page] { color: var(--navy); border-bottom-color: var(--oro); }

.rejilla-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tarjeta-admin { display: flex; align-items: flex-start; gap: 16px; color: var(--texto); padding: 20px; }
a.tarjeta-admin:hover { text-decoration: none; color: var(--texto); border-color: var(--oro); background: var(--blanco); }
.tarjeta-admin-icono {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--oro);
}
.tarjeta-admin.pendiente .tarjeta-admin-icono { background: var(--gris-fondo); color: var(--texto-3); }
.tarjeta-admin-texto { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.tarjeta-admin-texto strong { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.tarjeta-admin-texto span { font-size: 14px; color: var(--texto-3); line-height: 1.45; }
.tarjeta-admin-flecha { color: var(--oro); margin-top: 12px; }

.fila-usuario {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.6fr);
  padding: 14px 20px; color: var(--texto);
}
.fila-usuario:hover { background: var(--blanco); text-decoration: none; color: var(--texto); }
.fila-usuario.bloqueado, .fila-organo.bloqueado { opacity: 0.6; }

.fila-organo, .fila-dia {
  display: grid; align-items: center; gap: 16px; width: 100%;
  border: 0; background: none; text-align: left; cursor: pointer; color: var(--texto);
}
.fila-organo { grid-template-columns: 40px minmax(0, 2.4fr) minmax(0, 1.4fr); padding: 14px 20px; }
.fila-organo:hover { background: var(--blanco); }
.fila-organo .fila-principal .texto-tenue { font-size: 13px; }

.nota-pie { margin: 16px 4px 0; font-size: 13px; color: var(--texto-3); line-height: 1.55; }

.opciones-rol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opcion-rol { position: relative; cursor: pointer; }
.opcion-rol input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion-rol > span {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 12px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--blanco);
}
.opcion-rol strong { font-size: 15px; }
.opcion-rol .texto-tenue { font-size: 13px; line-height: 1.4; }
.opcion-rol input:checked + span { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--papel); }
.opcion-rol input:checked + span strong::before { content: '✓ '; color: var(--oro); }
.opcion-rol input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }

.formulario-tarjeta { display: flex; flex-direction: column; gap: 16px; }
.acciones-columna { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fila-sesion { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.fila-sesion .texto-tenue { font-size: 13px; }
.boton-pequeno { min-height: 36px; padding: 0 12px; font-size: 14px; }
.boton-texto-peligro { color: var(--rojo); }
.boton-texto-peligro:hover { color: var(--rojo); border-color: var(--rojo); background: var(--rojo-fondo); }
.fecha-corta { white-space: nowrap; font-size: 13px; }

.clave-temporal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radio);
  background: var(--navy); color: var(--papel);
}
.clave-temporal code { font-size: 20px; letter-spacing: 0.06em; user-select: all; }

.dialogo-ancho { max-width: min(760px, calc(100vw - 32px)); width: 100%; }
.dialogo-contenido { padding: 24px; }
.dialogo h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 600; }
.dialogo .rejilla-campos { margin-bottom: 16px; }
.dialogo-acciones-separadas { justify-content: space-between; flex-wrap: wrap; }
.dialogo-acciones-separadas > .dialogo-acciones { margin-top: 0; }

.banda-info { background: var(--azul-fondo); color: var(--texto-2); border: 1px solid #CFD5E3; }
.banda-info > .icono { color: var(--navy); }

/* Tablas */
.tarjeta-tabla { padding: 0; overflow: hidden; }
.tarjeta-tabla > h2 { padding: 20px 24px 0; }
.tabla-desplazable { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde-suave); }
.tabla thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); background: var(--crema); }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla-auditoria tbody tr { cursor: pointer; }
.tabla-auditoria tbody tr:hover, .tabla-auditoria tbody tr:focus-visible { background: var(--blanco); }
.tabla-matriz td { text-align: center; width: 110px; }
.tabla-matriz thead th:not(:first-child) { text-align: center; }
.tabla-matriz tbody th { font-weight: 400; }
.tabla-grupo th { background: var(--papel); font-family: var(--serif); font-size: 18px; font-weight: 500 !important; padding-top: 18px; }
.permiso-si { display: inline-flex; color: var(--verde); }
.permiso-no { color: var(--borde-fuerte); }
.tabla-cambios th[scope=row] { width: 30%; color: var(--texto-3); font-weight: 400; word-break: break-all; }
.tabla-cambios td { word-break: break-word; }
.tabla-cambios tr.cambiado td:last-child { background: var(--verde-fondo); }
.tabla-cambios tr.cambiado td:nth-last-child(2):not(:first-of-type) { background: var(--rojo-fondo); }

.rejilla-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.tarjeta-rol { padding: 18px; }
.tarjeta-rol p { margin: 10px 0 0; font-size: 14px; color: var(--texto-2); line-height: 1.5; }

.filtros-auditoria { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.filtros-auditoria .campo-etiqueta { font-size: 13px; }
.filtros-auditoria select, .filtros-auditoria input { min-height: 44px; }

.datos-compactos { margin-bottom: 8px; }
.interruptor { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-3); cursor: pointer; }

/* Días inhábiles */
.rejilla-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.tarjeta-mes { padding: 18px 20px; }
.tarjeta-mes h2 { text-transform: capitalize; font-size: 21px; margin-bottom: 6px; }
.tarjeta-mes .lista-filas { margin: 0; }
.fila-dia { grid-template-columns: 64px minmax(0, 1fr); padding: 4px 0; font-size: 14px; }
.fila-dia:hover .fila-principal > span:first-child { text-decoration: underline; }
.dia-fecha {
  display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 8px;
  background: var(--crema); font-weight: 600; font-size: 13px; text-transform: capitalize;
}
.dia-finde { color: var(--texto-3); font-weight: 400; }

/* Sistema y ajustes */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cifra { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radio); background: var(--crema); }
.cifra strong { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; }
.cifra span { font-size: 13px; color: var(--texto-3); }
.con-unidad { display: flex; align-items: center; gap: 10px; }
.con-unidad input { max-width: 140px; }

.lista-enlaces-boton {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  min-height: 52px; border: 0; border-top: 1px solid var(--borde-suave); background: none;
  color: var(--rojo); font-size: 16px; cursor: pointer; padding: 0;
}

/* ── Tablet ────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .fila-contacto { grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr); }
  .fila-etiquetas { display: none; }
}

@media (max-width: 1080px) {
  .ficha-rejilla, .rejilla-hoy { grid-template-columns: minmax(0, 1fr); }
  .rejilla-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-auditoria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Móvil ─────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  body { font-size: 15px; }
  .lateral { display: none; }

  .barra-superior { flex-wrap: wrap; gap: 12px; padding: 16px 16px 0; }
  .marca-movil { display: flex; padding: 0; gap: 10px; }
  .marca-movil .marca-logo { width: 30px; height: 30px; font-size: 18px; border-radius: 7px; }
  .marca-movil .marca-nombre { font-size: 20px; color: var(--texto); }
  .buscador { order: 3; flex-basis: 100%; height: 46px; }
  .buscador kbd { display: none; }
  .boton-nuevo { display: none; }

  .vista { padding: 20px 16px 120px; }
  .titulo { font-size: 32px; }
  .titulo-grande { font-size: 36px; }
  .cabecera { flex-wrap: wrap; align-items: flex-start; }
  .cabecera .boton { display: none; }
  .cabecera .boton[data-nuevo] { display: inline-flex; }
  .tarjeta { padding: 18px; }
  .tarjeta h2, .tarjeta legend { font-size: 22px; }

  .filtros-selects { flex-basis: 100%; }
  .filtros-selects label { flex: 1 1 0; min-width: 0; }
  .filtros-selects select { width: 100%; }

  .fila-contacto { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; }
  .fila-contacto .avatar { grid-row: span 2; align-self: start; }
  .fila-papeles { grid-column: 2; }
  .fila-papeles:empty { display: none; }
  .fila-contacto-datos { display: none; }

  .ficha-cabecera { flex-wrap: wrap; gap: 14px; }
  .avatar-grande { width: 56px; height: 56px; font-size: 20px; }
  .ficha-titulo { flex-basis: calc(100% - 70px); }
  .ficha-acciones { flex-basis: 100%; }
  .ficha-acciones .boton { flex: 1 1 0; }
  .dato { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .rejilla-campos { grid-template-columns: minmax(0, 1fr); }
  .segmentado { display: flex; }
  .segmentado label { flex: 1 1 0; }
  .segmentado span { justify-content: center; padding: 0 8px; }
  .form-linea input { width: auto; flex: 1 1 140px; }
  .form-linea select, .form-relacion select { flex: 1 1 100%; }
  .barra-acciones { bottom: 72px; }
  .barra-acciones .boton { flex: 1 1 0; }
  .duplicados-lista li { flex-wrap: wrap; }
  .duplicado-motivos { flex-basis: 100%; text-align: left; padding-left: 44px; }

  .fab {
    display: flex; position: fixed; right: 20px; bottom: 92px; z-index: 30;
    width: 56px; height: 56px; border-radius: 28px;
    align-items: center; justify-content: center;
    background: var(--oro); color: var(--navy); box-shadow: 0 6px 16px rgba(20, 33, 61, 0.25);
  }
  .fab:hover { color: var(--navy); }
  .en-formulario .fab { display: none; }

  .inferior {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(72px + env(safe-area-inset-bottom)); padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
    background: var(--navy);
  }
  .inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #C9CEDB; font-size: 11px;
  }
  .inferior a:hover { text-decoration: none; color: var(--papel); }
  .inferior a[aria-current=page] { color: var(--oro); font-weight: 600; }

  .avisos { bottom: 160px; width: calc(100% - 32px); }

  .acceso { min-height: calc(100vh - 48px); justify-content: flex-start; padding-top: 48px; }
  .acceso-tarjeta { padding: 24px 20px; }
  .fila-usuario { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; }
  .fila-usuario .avatar { grid-row: span 2; align-self: start; }
  .fila-usuario .chips { grid-column: 2; }
  .fila-usuario .fila-contacto-datos, .fila-organo .fila-contacto-datos { display: none; }
  .fila-organo { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 14px; }
  .opciones-rol, .rejilla-roles, .cifras { grid-template-columns: minmax(0, 1fr); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-auditoria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-auditoria label:first-child { grid-column: 1 / -1; }
  .rejilla-meses { grid-template-columns: minmax(0, 1fr); }
  .tabla th, .tabla td { padding: 10px 12px; }
  .pestanas { margin: 0 -16px 20px; padding: 0 16px 2px; }
  .clave-temporal { flex-wrap: wrap; }
  .clave-temporal code { font-size: 17px; }
  .dialogo-acciones-separadas .boton { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}