/* ============================================================
   CRM INTERNO — estética derivada de la dirección A "Despacho"
   (más densa que la web pública: es herramienta de trabajo diario)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --botella: #1E3A32;
  --botella-oscuro: #14281F;
  --tinta: #21302A;
  --marfil: #F1EFE6;
  --marfil-claro: #FAF9F3;
  --laton: #A8834B;
  --laton-claro: #C9A96E;
  --linea: #D8D4C4;
  --rojo: #7A2E2E;

  --serif: 'Libre Caslon Text', Georgia, serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); font-size: .96rem; color: var(--tinta); background: var(--marfil-claro); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
a { color: var(--botella); }
:is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--laton); outline-offset: 2px; }

/* ---- Estructura: sidebar + contenido ---- */
/* `minmax(0, 1fr)` y no `1fr`: una columna de rejilla crece hasta caber su
   contenido, asi que una tabla ancha ensanchaba la pagina entera y en el movil
   se desbordaba. Con el minimo en 0 la columna se queda en su sitio y es la
   tabla la que se desplaza dentro de su envoltorio. */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.lateral { background: var(--botella); color: var(--marfil); padding: 26px 0; display: flex; flex-direction: column; }
.lateral .marca { font-family: var(--serif); font-size: 1.2rem; color: var(--marfil); text-decoration: none; padding: 0 24px 4px; }
.lateral .marca em { font-style: normal; color: var(--laton-claro); }
.lateral .sub { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--laton-claro); padding: 0 24px 26px; }
.lateral nav { display: flex; flex-direction: column; }
.lateral nav a {
  color: #CFD6CB; text-decoration: none; font-size: .9rem; letter-spacing: .04em;
  padding: 11px 24px; border-left: 3px solid transparent;
}
.lateral nav a:hover { color: var(--marfil); background: rgba(255,255,255,.04); }
.lateral nav a.activo { color: var(--marfil); border-left-color: var(--laton); background: rgba(255,255,255,.06); }
.lateral nav a .num {
  float: right; font-size: .72rem; background: var(--laton); color: var(--botella-oscuro);
  padding: 1px 8px; border-radius: 10px; font-weight: 700;
}
.lateral .pie-lateral { margin-top: auto; padding: 20px 24px 0; font-size: .78rem; color: #9FB0A2; }
.lateral .pie-lateral form button {
  background: none; border: 1px solid #4A5F53; color: #CFD6CB; font-family: var(--sans);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; cursor: pointer;
}
.lateral .pie-lateral form button:hover { border-color: var(--laton); color: var(--laton-claro); }

/* Sin tope de ancho: el contenido usa toda la pantalla. Hubo un limite de
   1240px por legibilidad, pero dejaba media pantalla vacia en los monitores
   de trabajo y las tablas y rejillas se comprimian sin motivo. */
.principal { padding: 34px 42px; min-width: 0; }
.cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.cabecera h1 { font-size: 1.75rem; }
.eyebrow { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--laton); display: block; margin-bottom: 8px; }

/* ---- Botones ---- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; padding: 10px 20px; cursor: pointer;
  border: 1px solid var(--botella); color: var(--botella); background: transparent;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--botella); color: var(--marfil-claro); }
.btn--lleno { background: var(--laton); border-color: var(--laton); color: var(--botella-oscuro); }
.btn--lleno:hover { background: var(--laton-claro); border-color: var(--laton-claro); color: var(--botella-oscuro); }
.btn--peligro { border-color: var(--rojo); color: var(--rojo); }
.btn--peligro:hover { background: var(--rojo); color: var(--marfil-claro); }
.btn--mini { padding: 6px 12px; font-size: .68rem; }

/* ---- Tarjetas y métricas ---- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 34px; }
.metrica { background: var(--marfil); border: 1px solid var(--linea); border-top: 3px solid var(--laton); padding: 18px 20px; text-decoration: none; }
.metrica .valor { font-family: var(--serif); font-size: 2rem; color: var(--botella-oscuro); }
.metrica .etiqueta { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #55604F; }
.metrica--alerta { border-top-color: var(--rojo); }

/* ---- Tablas ---- */
/* Una tabla con varias columnas no cabe en un móvil. En vez de romper la
   página entera, se desplaza dentro de su propio marco. */
.tabla-marco { overflow-x: auto; }
.tabla-marco .tabla { min-width: 520px; }
.tabla { width: 100%; border-collapse: collapse; background: var(--marfil-claro); border: 1px solid var(--linea); }
.tabla th {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--laton);
  text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--linea); background: var(--marfil);
}
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:hover td { background: var(--marfil); }
.tabla a { text-decoration: none; font-weight: 600; }
.tabla .sec { color: #55604F; font-size: .86rem; }

/* ---- Chapas de estado ---- */
.chapa { display: inline-block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--linea); background: var(--marfil); }
.chapa--verde { border-color: #4C7A4C; color: #3B613B; }
.chapa--laton { border-color: var(--laton); color: var(--laton); }
.chapa--roja { border-color: var(--rojo); color: var(--rojo); }
.chapa--gris { color: #777; }

/* ---- Ficha (detalle) ---- */
.ficha-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
/* Sin esto, una celda de la rejilla nunca se encoge por debajo de su contenido:
   una tabla ancha dentro ensancharía la página entera en vez de desplazarse. */
.ficha-grid > * { min-width: 0; }
.panel { background: var(--marfil); border: 1px solid var(--linea); border-top: 3px solid var(--laton); padding: 24px 26px; margin-bottom: 24px; }
.panel h2 { font-size: 1.15rem; margin-bottom: 16px; }
.panel dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: .92rem; }
.panel dt { color: #55604F; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.panel dd { border-bottom: 1px solid var(--linea); padding-bottom: 7px; }
.panel ul.lista-limpia { list-style: none; }
.panel ul.lista-limpia li { padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.panel .codigo { font-family: var(--serif); border: 1px solid var(--laton); color: var(--botella); padding: 3px 12px; letter-spacing: .12em; }

/* ---- Formularios y filtros ---- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.filtros input[type="search"], .filtros select {
  font-family: var(--sans); font-size: .92rem; padding: 9px 12px;
  border: 1px solid var(--linea); background: var(--marfil-claro); min-width: 170px;
}
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--botella); margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%; font-family: var(--sans); font-size: .95rem;
  border: 1px solid var(--linea); background: var(--marfil-claro); padding: 10px 12px;
}

/* ---- Login ---- */
.login-caja {
  max-width: 400px; margin: 12vh auto; background: var(--marfil);
  border: 1px solid var(--linea); border-top: 3px solid var(--laton); padding: 42px 40px;
}
.login-caja .marca { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 4px; }
.login-caja .marca em { font-style: normal; color: var(--laton); }
.login-caja .sub { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--laton); margin-bottom: 30px; }
.login-caja .error { color: var(--rojo); font-size: .86rem; margin-bottom: 14px; }

/* ---- Visor CV ---- */
.visor-cv { width: 100%; height: 640px; border: 1px solid var(--linea); background: #fff; }

/* ---- Mensajes flash ---- */
.alerta { border: 1px solid var(--laton); background: var(--marfil); padding: 13px 18px; margin-bottom: 22px; font-size: .92rem; }
.alerta--error { border-color: var(--rojo); color: var(--rojo); }

/* ---- Responsive básico ---- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .lateral nav a { padding: 8px 10px; border-left: none; }
  .lateral .sub, .lateral .pie-lateral { display: none; }
  .principal { padding: 22px 16px; }
  .ficha-grid { grid-template-columns: 1fr; }
  .panel dl { grid-template-columns: 1fr; }
}

/* ---- Formularios CRUD (filas dinámicas) ---- */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fila-inline { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.fila-inline input, .fila-inline select {
  font-family: var(--sans); font-size: .92rem; padding: 8px 10px;
  border: 1px solid var(--linea); background: var(--marfil-claro); flex: 1; min-width: 110px;
}
.fila-bloque { border: 1px dashed var(--linea); padding: 14px 16px 12px; margin-bottom: 14px; background: var(--marfil-claro); }
.tres-mini { display: flex; gap: 12px; }
.tres-mini span { flex: 1; }
.tres-mini input[type="checkbox"] { width: auto; margin-top: 12px; }
[data-anadir] { margin-top: 4px; }
@media (max-width: 700px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ---- Kanban ---- */
.kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 30px; }
.kanban-col { background: var(--marfil); border: 1px solid var(--linea); min-height: 180px; display: flex; flex-direction: column; }
.kanban-col h3 {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--laton); padding: 10px 12px; border-bottom: 2px solid var(--linea); background: var(--marfil);
}
.kanban-col[data-fase="contratado"] h3 { color: #3B613B; }
.kanban-col[data-fase="descartado"] h3 { color: var(--rojo); }
.kanban-zona { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kanban-col.arrastre-encima { outline: 2px dashed var(--laton); outline-offset: -4px; }
.tarjeta-kanban {
  background: var(--marfil-claro); border: 1px solid var(--linea); border-left: 3px solid var(--laton);
  padding: 10px 12px; cursor: grab; font-size: .88rem;
}
.tarjeta-kanban:active { cursor: grabbing; }
.tarjeta-kanban.arrastrando { opacity: .4; }
.tarjeta-kanban a { text-decoration: none; font-weight: 600; }
.tarjeta-kanban .sec { display: block; font-size: .78rem; color: #55604F; margin-top: 2px; }
.tarjeta-kanban .checks { font-size: .72rem; color: var(--laton); }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kanban { grid-template-columns: 1fr; } }

/* ---- Sub-procesos ---- */
.subprocesos { display: grid; gap: 6px; }
.subprocesos label { display: flex; gap: 10px; align-items: center; font-size: .92rem; padding: 6px 8px; background: var(--marfil-claro); border: 1px solid var(--linea); }
.subprocesos .grupo { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--laton); margin: 10px 0 2px; }

/* ============================================================
   AGENDA — rejilla de semana y día
   Los vencimientos NO son bloques: no ocupan tiempo, son una
   frontera. Van como marca en la cabecera del día.
   ============================================================ */
.agenda-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.agenda-barra .hoy { font-family: var(--serif); font-size: 1.05rem; margin-right: auto; }

.rejilla { display: grid; border: 1px solid var(--linea); background: var(--marfil-claro); overflow-x: auto; }
.rejilla-cabecera { display: grid; border-bottom: 1px solid var(--linea); background: var(--marfil); }
.rejilla-cabecera .celda-hora { border-right: 1px solid var(--linea); }
.dia-cabecera { padding: 9px 10px; border-right: 1px solid var(--linea); min-width: 0; }
.dia-cabecera:last-child { border-right: 0; }
.dia-cabecera .nombre { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #55604F; }
.dia-cabecera .numero { font-family: var(--serif); font-size: 1.3rem; color: var(--botella-oscuro); }
.dia-cabecera.es-hoy { background: var(--marfil-claro); box-shadow: inset 0 -3px 0 var(--laton); }
.dia-cabecera.sin-jornada .numero { color: #9aa39b; }

.vence { display: block; font-size: .68rem; color: var(--rojo); border-left: 2px solid var(--rojo);
         padding-left: 5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rejilla-cuerpo { display: grid; position: relative; }
.columna-horas { border-right: 1px solid var(--linea); position: relative; }
.columna-horas .marca-hora { position: absolute; right: 6px; font-size: .66rem; color: #7b8579; transform: translateY(-50%); }
.columna-dia { position: relative; border-right: 1px solid var(--linea); min-width: 0; }
.columna-dia:last-child { border-right: 0; }
.linea-hora { position: absolute; left: 0; right: 0; border-top: 1px solid #E7E3D6; }
.fuera-jornada { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(
    135deg, rgba(216,212,196,.30), rgba(216,212,196,.30) 5px, transparent 5px, transparent 10px); }

.bloque { position: absolute; left: 3px; right: 3px; padding: 4px 7px; overflow: hidden;
          font-size: .72rem; line-height: 1.25; border-left: 3px solid; text-decoration: none; display: block; }
.bloque .hora { font-size: .64rem; opacity: .8; display: block; }
.bloque--entrevista { background: var(--botella); border-left-color: var(--laton-claro); color: var(--marfil-claro); }
.bloque--tarea { background: var(--marfil); border: 1px solid var(--linea); border-left: 3px solid var(--laton); color: var(--tinta); }
.bloque--hecha { opacity: .55; text-decoration: line-through; }
.bloque--solapa { outline: 2px solid var(--rojo); outline-offset: -2px; }

.sin-colocar li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.sin-colocar li:last-child { border-bottom: 0; }
.sin-colocar .titulo { flex: 1; min-width: 160px; }
.sin-colocar input[type="datetime-local"], .sin-colocar input[type="number"] {
  font-family: var(--sans); font-size: .82rem; padding: 6px 8px; border: 1px solid var(--linea); background: var(--marfil-claro); }

/* La lista por día es la vista de móvil: oculta por defecto, y la regla que
   la enciende va DESPUÉS, o el orden de cascada la deja apagada siempre. */
.agenda-lista { display: none; }

@media (max-width: 900px) {
  /* La rejilla de semana no cabe en un teléfono y forzarla se lee mal:
     la misma semana se presenta como lista por día, con la hora delante. */
  .rejilla { display: none; }
  .agenda-lista { display: block; }
}
.agenda-lista .dia { border: 1px solid var(--linea); border-top: 3px solid var(--laton); background: var(--marfil); margin-bottom: 14px; padding: 14px 16px; }
.agenda-lista .dia h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 8px; }
.agenda-lista .fila { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linea); font-size: .86rem; }
.agenda-lista .fila .hora { color: #55604F; min-width: 46px; }

/* ============================================================
   TABLERO DE TAREAS — tres columnas
   Sin arrastrar y soltar a proposito: exigiria una libreria de
   JavaScript externa y la imagen de produccion no sirve nada de
   fuera. Un boton por direccion mueve igual de rapido.
   ============================================================ */
.tablero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.tablero-col { background: var(--marfil); border: 1px solid var(--linea); border-top: 3px solid var(--laton); display: flex; flex-direction: column; }
.tablero-cab { font-family: var(--serif); font-size: 1.05rem; padding: 12px 16px; border-bottom: 1px solid var(--linea);
               display: flex; justify-content: space-between; align-items: center; }
.tablero-cab .cuenta { font-family: var(--sans); font-size: .72rem; color: #55604F; border: 1px solid var(--linea);
                       border-radius: 999px; padding: 1px 9px; background: var(--marfil-claro); }
.tablero-cuerpo { padding: 12px 14px; display: grid; gap: 10px; }

.tarjeta { background: var(--marfil-claro); border: 1px solid var(--linea); border-left: 3px solid var(--laton); padding: 11px 13px; }
.tarjeta--vencida { border-left-color: var(--rojo); }
.tarjeta--hecha { opacity: .62; }
.tarjeta--hecha .tarjeta-titulo { text-decoration: line-through; }
.tarjeta-titulo { font-size: .92rem; margin-bottom: 4px; }
.vencida { font-size: .74rem; color: var(--rojo); }
.tarjeta-acciones { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.tarjeta-acciones .apartar { display: flex; gap: 4px; }
.tarjeta-acciones .apartar input { width: 92px; font-family: var(--sans); font-size: .7rem; padding: 4px 6px;
                                   border: 1px solid var(--linea); background: var(--marfil-claro); }

@media (max-width: 900px) { .tablero { grid-template-columns: 1fr; } }
.tarjeta-editar { margin-top: 8px; }
.tarjeta-editar summary { cursor: pointer; }
.tarjeta-editar .campo { margin-bottom: 7px; }

/* ============================================================
   VENTANAS — <dialog> nativo, sin librerias
   El elemento del navegador ya trae foco atrapado, cierre con
   Escape y fondo inerte. Meter una libreria para esto seria
   traer 40 KB a cambio de nada.
   ============================================================ */
dialog.ventana { border: 1px solid var(--linea); border-top: 3px solid var(--laton); background: var(--marfil);
                 padding: 0; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 64px); color: var(--tinta);
                 /* El reset `* { margin: 0 }` de arriba pisa el `margin: auto`
                    que el navegador le da al <dialog>, y sin esto la ventana
                    se pega a la esquina superior izquierda. */
                 margin: auto; }
dialog.ventana::backdrop { background: rgba(30, 58, 50, .55); }
dialog.ventana .ventana-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
                              padding: 18px 24px 12px; border-bottom: 1px solid var(--linea); }
dialog.ventana .ventana-cab h2 { font-family: var(--serif); font-size: 1.2rem; }
dialog.ventana .ventana-cuerpo { padding: 20px 24px 24px; overflow-y: auto; max-height: calc(100vh - 190px); }
dialog.ventana .cerrar { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: #55604F; cursor: pointer; padding: 0 4px; }
dialog.ventana .cerrar:hover { color: var(--rojo); }
/* Los formularios de Ajustes son más anchos que un aviso: dos columnas de
   campos dentro de 620px quedan estranguladas. */
dialog.ventana--ancha { width: min(820px, calc(100vw - 32px)); }

/* ---- Botonera: cada botón abre su ventana ---- */
.botonera { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.botonera button {
  font-family: var(--sans); font-size: .96rem; text-align: left; cursor: pointer; color: var(--tinta);
  background: var(--marfil); border: 1px solid var(--linea); border-top: 3px solid var(--laton);
  padding: 20px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.botonera button:hover { outline: 2px solid var(--laton); outline-offset: -2px; }
.botonera .titulo { font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; }
.botonera .pie { font-size: .82rem; color: #55604F; }

.acciones-cabecera { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Los bloques de la rejilla son botones: se pulsan y abren su ventana. */
button.bloque { font-family: var(--sans); text-align: left; cursor: pointer; }
button.bloque:hover { outline: 2px solid var(--laton); outline-offset: -2px; }
.fila-abrir { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fila-abrir:hover { color: var(--laton); }
.ventana-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
/* Una tarea sin hueco en el calendario: se dice en su tarjeta, no en una
   lista aparte que repita las que ya están en las columnas. */
.sin-fecha { color: #8A8172; border: 1px dashed var(--linea); padding: 0 6px; font-size: .72rem; }

/* ============================================================
   EL VOCABULARIO DE LAS APPS
   ------------------------------------------------------------
   Todo lo de arriba es la hoja original del CRM de Ana en Laravel,
   copiada sin tocar una coma.

   Lo de aqui abajo viste los nombres de clase que usan las pantallas
   de las apps del armario. Las apps solo dicen "esto es un boton",
   "esto es una ficha"; que un boton sea verde botella y una ficha
   lleve filete de laton lo decide ESTA hoja, y solo vale para Ana.

   Si maniana se copia una app nueva y usa un nombre que no esta aqui,
   se aniade aqui. Nunca se toca la app.
   ============================================================ */

/* ---- Botones ---- */
.boton {
  display: inline-block; background: var(--laton); border: 1px solid var(--laton);
  color: var(--botella-oscuro); font-family: var(--sans); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; padding: 9px 18px;
  cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--laton-claro); border-color: var(--laton-claro); }
.boton.secundario, .boton--secundario {
  background: none; border-color: var(--botella); color: var(--botella);
}
.boton.secundario:hover { background: var(--botella); color: var(--marfil-claro); }
button.boton { line-height: 1.4; }

/* ---- Fichas: los bloques de dato ---- */
.ficha { background: var(--marfil); border: 1px solid var(--linea);
         border-top: 3px solid var(--laton); padding: 22px 24px; margin-bottom: 22px; }
.ficha dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: .92rem; }
.ficha dt { color: #55604F; font-size: .74rem; letter-spacing: .12em;
            text-transform: uppercase; padding-top: 3px; }
.ficha dd { border-bottom: 1px solid var(--linea); padding-bottom: 7px; }
.fichas { display: grid; gap: 16px; }

/* ---- Barra de acciones de cada pantalla ---- */
.acciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.acciones .derecha, .derecha { margin-left: auto; }

/* ---- Buscador ---- */
.buscador { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; }
.buscador input[type="search"] {
  flex: 1; min-width: 220px; font-family: var(--sans); font-size: .92rem;
  border: 1px solid var(--linea); background: var(--marfil-claro); padding: 9px 12px;
}
.casilla { display: flex; gap: 7px; align-items: center; font-size: .84rem; color: #55604F; }
/* Cifras en rejilla: un numero grande y su etiqueta debajo. Sin esto las
   tarjetas se apilan una encima de otra y el numero se pega a la etiqueta. */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 14px; margin-bottom: 22px; }
.tarjetas .tarjeta { display: flex; flex-direction: column; gap: 5px; }
.tarjetas .tarjeta strong { font-family: var(--serif); font-size: 1.9rem; line-height: 1;
                            color: var(--botella-oscuro); }
.tarjetas .tarjeta span { font-size: .82rem; color: #55604F; }

/* Una casilla dentro de un campo hereda el 100% de ancho de los demas
   controles y queda estirada en medio de la columna. Aqui no. */
.campo .casilla { text-transform: none; letter-spacing: normal; margin-bottom: 0; }
.campo input[type="checkbox"] { width: auto; }

/* ---- Tablas ---- */
.tabla-envoltorio { overflow-x: auto; margin-bottom: 22px; }

/* ---- Estados vacios ---- */
.vacio { background: var(--marfil); border: 1px dashed var(--linea);
         padding: 34px 24px; text-align: center; color: #55604F; }
.vacio strong { color: var(--tinta); }

/* ---- Textos menores ---- */
.tenue { color: #7b8579; font-size: .82rem; }
.cuenta { font-size: .78rem; color: #55604F; margin-bottom: 14px; display: inline-block; }
.error { color: var(--rojo); font-size: .86rem; margin: 6px 0; }
.etiqueta { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
            border: 1px solid var(--linea); padding: 2px 8px; color: #55604F; }
.estado { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--botella); }
.dinero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.icono { font-size: 1.3rem; }

/* ---- Formularios en pantalla entera ---- */
.formulario { max-width: 760px; }
.formulario .campo textarea { min-height: 90px; }

/* ---- Paginacion ---- */
.paginas { display: flex; gap: 16px; align-items: center; justify-content: center;
           font-size: .86rem; margin-top: 8px; }

/* ---- Conversacion con un agente (app de IA) ---- */
.charla { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.turno { background: var(--marfil); border: 1px solid var(--linea); padding: 14px 16px; max-width: 80%; }
.turno.assistant { border-left: 3px solid var(--laton); }
.turno .quien-habla { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
                      color: var(--laton); margin-bottom: 6px; }
.turno .dicho { font-size: .94rem; white-space: pre-wrap; }
.turno.pensando { opacity: .6; font-style: italic; }
.borrador { background: var(--marfil-claro); border: 1px dashed var(--linea); padding: 12px; }
.aceptado { color: #3B613B; }
.rechazado { color: var(--rojo); }
.contacto { font-size: .86rem; color: #55604F; }
.notas { font-size: .88rem; color: #55604F; }

/* Las tarjetas que son enlace: sin subrayado, el bloque entero es el enlace. */
a.tarjeta { display: block; text-decoration: none; color: inherit; }
a.tarjeta:hover { border-left-color: var(--botella); }

/* ---- La cabecera de cifras de la agenda ---- */
.hero-agenda { display: flex; gap: 30px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.hero-cifra { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--botella-oscuro); margin: 4px 0 6px; }
.hero-alerta { margin-top: 10px; font-size: .84rem; color: var(--rojo); }
.hero-ok { margin-top: 10px; font-size: .84rem; color: #3B613B; }
.hero-aparte { border-left: 1px solid var(--linea); padding-left: 26px; min-width: 150px; }
.hero-aparte-valor { font-family: var(--serif); font-size: 1.9rem; color: var(--botella-oscuro); margin: 4px 0 6px; }

/* ---- Con quién va una tarea, dentro de un bloque ---- */
.bloque-quien, .mes-bloque .bloque-quien {
  display: block; font-size: .62rem; opacity: .85; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---- La vista de mes ---- */
.mes { border: 1px solid var(--linea); background: var(--marfil-claro); }
.mes-cabecera { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--marfil);
                border-bottom: 1px solid var(--linea); }
.mes-cabecera div { padding: 8px 10px; font-size: .7rem; letter-spacing: .16em;
                    text-transform: uppercase; color: #55604F; border-right: 1px solid var(--linea); }
.mes-cabecera div:last-child { border-right: 0; }
.mes-fila { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--linea); }
.mes-fila:last-child { border-bottom: 0; }
.mes-dia { min-height: 112px; padding: 7px 8px; border-right: 1px solid var(--linea);
           display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mes-dia:last-child { border-right: 0; }
.mes-dia.otro-mes { background: rgba(216,212,196,.18); }
.mes-dia.otro-mes .mes-numero { color: #9aa39b; }
.mes-dia.sin-jornada { background: repeating-linear-gradient(
    135deg, rgba(216,212,196,.22), rgba(216,212,196,.22) 5px, transparent 5px, transparent 10px); }
.mes-dia.es-hoy { box-shadow: inset 0 -3px 0 var(--laton); }
.mes-numero { font-family: var(--serif); font-size: 1.05rem; color: var(--botella-oscuro); text-decoration: none; }
.mes-bloque { display: block; font-size: .68rem; line-height: 1.25; background: var(--marfil);
              border-left: 3px solid var(--laton); padding: 3px 6px; color: var(--tinta);
              text-decoration: none; overflow: hidden; }
.mes-bloque .hora { font-size: .62rem; opacity: .8; }

@media (max-width: 900px) {
  .mes-dia { min-height: 78px; }
  .hero-aparte { border-left: 0; padding-left: 0; }
}

/* La × de cerrar tambien puede ser un enlace —cuando cerrar es volver a otra
   direccion—, y su regla original solo contemplaba un boton. */
dialog.ventana a.cerrar { text-decoration: none; border: 0; display: inline-block; }