/* CRM Osteleria: hoja propia, sin frameworks ni recursos externos (ni fuentes ni CDN). */
:root {
  /* Marca: los 3 colores de Osteleria van aquí y en ningún otro sitio. PENDIENTE: los valores de
     osteleria.com (no se pudieron leer: el CSS del tema no llega por la lectura permitida). Hasta
     entonces, neutros; cambiarlos aquí cambia cabecera, menú, botones y enlaces. */
  --marca: #1f5fbf;
  --marca-oscuro: #174a96;
  --marca-suave: #e8f0fb;

  --fondo: #f6f7f9;
  --tarjeta: #ffffff;
  --texto: #1d2330;
  --suave: #5b6475;
  --borde: #dde1e8;
  --acento: var(--marca);
  --acento-oscuro: var(--marca-oscuro);
  --aviso-fondo: #fff4e5;
  --aviso-borde: #e08a00;
  --ok-fondo: #e9f7ee;
  --ok-borde: #2e9b57;
  --error-fondo: #fdecec;
  --error-borde: #c62828;
  --radio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--acento); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

/* Cabecera: marca + usuario arriba; menú debajo. Una franja de color de marca, sin imágenes. */
.cabecera { background: var(--tarjeta); border-top: 4px solid var(--marca); border-bottom: 1px solid var(--borde); }
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1100px; margin: 0 auto; padding: .6rem 1rem 0;
}
.marca { display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none; }
.marca-nombre { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--marca); }
.marca-crm { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--suave);
  border: 1px solid var(--borde); border-radius: 4px; padding: 0 .3rem; }
.usuario { color: var(--suave); font-size: .9rem; overflow-wrap: anywhere; text-align: right; }

.menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  max-width: 1100px; margin: 0 auto; padding: .4rem .75rem .5rem;
}
.menu a, .menu-boton {
  display: inline-block; padding: .4rem .7rem; border-radius: var(--radio); font: inherit; font-size: .95rem;
  color: var(--texto); text-decoration: none; background: transparent; border: 0; cursor: pointer;
}
.menu a:hover, .menu-boton:hover { background: var(--marca-suave); }
.menu a[aria-current="page"] { background: var(--marca-suave); color: var(--marca-oscuro); font-weight: 700; }
.menu a:focus-visible, .menu-boton:focus-visible { outline: 3px solid var(--marca-oscuro); outline-offset: 2px; }
.salir { margin: 0 0 0 auto; }
.menu-boton { color: var(--suave); }

.pie { max-width: 1100px; margin: 2rem auto 1rem; padding: 0 1rem; color: var(--suave); font-size: .85rem; }

.contenido { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem; margin-bottom: 1rem;
}
.estrecha { max-width: 380px; margin: 2rem auto; }

label { display: block; font-weight: 600; margin: .5rem 0 .25rem; }
input[type="text"], input[type="password"], input[type="search"], textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; color: inherit;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
}
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .boton:focus-visible {
  outline: 3px solid var(--marca-oscuro); outline-offset: 2px; }

.boton {
  display: inline-block; margin-top: .75rem; padding: .6rem 1.1rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--acento); border: 0; border-radius: var(--radio); cursor: pointer;
}
.boton:hover { background: var(--acento-oscuro); }

.buscador .fila { display: flex; gap: .5rem; }
.buscador .fila .boton { margin-top: 0; }

.aviso {
  background: var(--aviso-fondo); border-left: 4px solid var(--aviso-borde);
  padding: .75rem 1rem; border-radius: var(--radio); margin: 0 0 1rem;
}
.aviso p { margin: .25rem 0 0; }
.mensaje { padding: .6rem 1rem; border-radius: var(--radio); margin: 0 0 1rem; }
.mensaje-success { background: var(--ok-fondo); border-left: 4px solid var(--ok-borde); }
.mensaje-error { background: var(--error-fondo); border-left: 4px solid var(--error-borde); }
.mensaje-info, .mensaje-warning { background: var(--marca-suave); border-left: 4px solid var(--marca); }

.etiqueta-ok { background: var(--ok-fondo); border: 1px solid var(--ok-borde); }
.etiqueta:not(.etiqueta-aviso):not(.etiqueta-ok) { background: var(--marca-suave); border: 1px solid var(--borde); }
.form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; align-items: start; }
.form-fila .campo-ancho, .form-fila .campo:has(textarea) { grid-column: 1 / -1; }
.form-fila .boton { justify-self: start; }
select, input[type="date"], input[type="datetime-local"], input[type="number"] {
  width: 100%; padding: .55rem .7rem; font: inherit; color: inherit;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.en-linea { display: inline; margin: 0; }
.boton-secundario { margin-top: .4rem; padding: .35rem .9rem; color: var(--marca-oscuro); background: var(--marca-suave);
  border: 1px solid var(--marca); }
.boton-secundario:hover { background: #fff; }
.atrasado { border-left: 4px solid var(--aviso-borde); padding-left: .75rem; }
.hecho .nota-texto { color: var(--suave); }

.etiqueta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .9rem; }
.etiqueta-aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); }

.nota-recorte, .vacio, .volver { color: var(--suave); }

.tabla { width: 100%; border-collapse: collapse; background: var(--tarjeta); }
.tabla th, .tabla td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borde);
  vertical-align: top; overflow-wrap: anywhere; }
.tabla th { font-size: .85rem; color: var(--suave); text-transform: uppercase; letter-spacing: .02em; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

.otras { margin-top: .75rem; }
.otras summary { cursor: pointer; color: var(--suave); }

.nota { border-top: 1px solid var(--borde); padding-top: .6rem; margin-top: .6rem; }
.nota-meta { margin: 0; color: var(--suave); font-size: .9rem; }
.nota-texto { margin: .25rem 0 0; white-space: normal; overflow-wrap: anywhere; }
.form-nota { margin-bottom: 1rem; }

/* Móvil: cada fila de tabla pasa a ser una tarjeta con su título en cada dato. */
@media (max-width: 700px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: .75rem;
    padding: .25rem 0; }
  .tabla td { border: 0; padding: .25rem .75rem; }
  .tabla td::before { content: attr(data-titulo); display: block; font-size: .8rem; color: var(--suave); }
  .datos { grid-template-columns: 1fr; }
  .datos dd { margin-bottom: .4rem; }
  .buscador .fila { flex-direction: column; }
  .contenido { padding: .75rem; }
  .tarjeta { padding: .85rem; }
  h1 { font-size: 1.3rem; overflow-wrap: anywhere; }
  .marca-nombre { font-size: 1.2rem; }
  .menu { padding: .3rem .5rem .5rem; }
  .menu a, .menu-boton { padding: .45rem .55rem; min-height: 44px; display: inline-flex; align-items: center; }
  .salir { margin-left: 0; }
  .boton { width: 100%; min-height: 44px; }
}

/* Texto solo para lectores de pantalla (cabecera de la columna de selección). */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Calendario (/calendario/): un color por autor (paleta fija, clientes/calendario.py COLORES) como
   borde y muestra; el nombre va siempre escrito al lado, el color no es lo único que lo dice. */
.color-0 { --cal: #1f5fbf; } .color-1 { --cal: #c62828; } .color-2 { --cal: #2e7d32; }
.color-3 { --cal: #8e24aa; } .color-4 { --cal: #e65100; } .color-5 { --cal: #00838f; }
.color-6 { --cal: #6d4c41; } .color-7 { --cal: #ad1457; }
.cal-leyenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.cal-muestra { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; margin-right: .35rem;
  vertical-align: -.1rem; background: var(--cal); }
.cal-semana { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.cal-semana-dia { border: 1px solid var(--borde); border-radius: var(--radio); padding: .4rem; min-width: 0; }
.cal-semana-dia h3 { font-size: .95rem; margin: 0 0 .3rem; }
.cal-hoy { background: var(--marca-suave); }
.cal-lista { list-style: none; padding: 0; margin: 0; }
.cal-seg { border-left: 5px solid var(--cal); background: var(--tarjeta); border-radius: 4px; margin: .25rem 0;
  padding: .15rem .35rem; font-size: .85rem; }
.cal-seg a { color: var(--texto); text-decoration: none; display: block; overflow-wrap: anywhere; }
.cal-seg a:hover .cal-cliente { text-decoration: underline; }
.cal-seg a:focus-visible { outline: 3px solid var(--marca-oscuro); outline-offset: 2px; }
.cal-autor { font-weight: 700; }
.cal-texto { display: block; color: var(--suave); }
.cal-hecho .cal-cliente, .cal-hecho .cal-texto { text-decoration: line-through; color: var(--suave); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cal-nav h2 { margin: 0; }
.cal-mes { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: .5rem; }
.cal-mes th { font-size: .85rem; color: var(--suave); padding: .3rem; }
.cal-mes th abbr { text-decoration: none; }
.cal-mes td { border: 1px solid var(--borde); vertical-align: top; padding: .3rem; height: 5.5rem; }
.cal-fuera { background: var(--fondo); }
.cal-num { font-weight: 700; font-size: .9rem; }

@media (max-width: 700px) {
  .cal-semana { grid-template-columns: 1fr; }
  .cal-mes thead, .cal-fuera, .cal-vacio { display: none; }
  .cal-mes, .cal-mes tbody, .cal-mes tr, .cal-mes td { display: block; width: 100%; }
  .cal-mes td { height: auto; border-radius: var(--radio); margin-bottom: .5rem; }
  .cal-mes .cal-num { display: none; }
  .cal-mes td::before { content: attr(data-titulo); display: block; font-weight: 700; }
}