/* Colores corporativos de Clínica Colev (www.colev.es) */
:root {
  --fondo: #f3f6f7;
  --tarjeta: #ffffff;
  --texto: #202a30;
  --titulos: #44535b;
  --suave: #697882;
  --borde: #ccd6df;
  --acento: #3e8576;
  --acento-oscuro: #326b5f;
  --acento-vivo: #40c8ab;
  --acento-suave: #e2edea;
  --aviso: #8a5a00;
  --aviso-suave: #fbf1dc;
  --error: #a33a2c;
  --error-suave: #f8e5e1;
  --radio: 10px;
  --fuente-titulos: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --fuente-texto: "Open Sans", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 var(--fuente-texto);
}
a { color: var(--acento); }

.barra {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.barra .marca {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--fuente-titulos); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--titulos); font-size: 15px;
}
.barra .marca svg { flex: none; }
.barra .marca small { font-family: var(--fuente-texto); letter-spacing: 0; text-transform: none; color: var(--acento); font-weight: 600; font-size: 12px; }
.barra nav { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.barra nav a { text-decoration: none; color: var(--titulos); white-space: nowrap; font-family: var(--fuente-titulos); font-weight: 500; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; }
.barra nav a:hover { color: var(--acento); }
.barra nav a.activo { color: var(--acento); font-weight: 700; border-bottom-color: var(--acento); }
.barra .usuario { color: var(--suave); font-size: 13px; }
.barra form { display: inline; }

main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2 { font-family: var(--fuente-titulos); color: var(--titulos); }
h1 { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px; margin-bottom: 16px;
}
.tarjeta > .nota { margin-top: -6px; }
.nota { color: var(--suave); font-size: 13px; margin: 0 0 12px; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 13px; font-weight: 600; }
.campo .ayuda { font-size: 12px; color: var(--suave); }
.campo .err { font-size: 12px; color: var(--error); }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=password],
input[type=search], select, textarea {
  font: inherit; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px;
  background: #fff; color: var(--texto); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
.campo.con-error input, .campo.con-error select { border-color: var(--error); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check label { font-weight: normal; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Botones en forma de píldora, como en la web */
.boton {
  display: inline-block; font: inherit; font-weight: 600; padding: 9px 22px; border-radius: 30px;
  border: 1.5px solid var(--acento); background: var(--acento); color: #fff; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.boton.secundario { background: #fff; color: var(--acento); }
.boton.secundario:hover { background: var(--acento-suave); }
.boton.enlace { border: none; background: none; color: var(--suave); padding: 0; font-weight: normal; }

.mensaje { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 16px; }
.mensaje.ok { background: var(--acento-suave); color: var(--acento-oscuro); }
.mensaje.error { background: var(--error-suave); color: var(--error); }
.mensaje.aviso { background: var(--aviso-suave); color: var(--aviso); }
.estado-nif { font-size: 12px; min-height: 16px; }
.estado-nif.ok { color: var(--acento); }
.estado-nif.mal { color: var(--error); }
.estado-nif.info { color: var(--aviso); }

.chip {
  display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento); margin-right: 4px; white-space: nowrap;
}
.chip.gris { background: #e9eef1; color: var(--suave); }
.chip.aviso { background: var(--aviso-suave); color: var(--aviso); }
.chip.error { background: var(--error-suave); color: var(--error); }

table.lista { width: 100%; border-collapse: collapse; background: var(--tarjeta); }
table.lista th, table.lista td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.lista th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
table.lista tr:hover td { background: #f6f9f9; }
.envoltorio-tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.filtros input[type=search] { max-width: 320px; }
.pestanas a { margin-right: 12px; text-decoration: none; color: var(--suave); }
.pestanas a.activo { color: var(--acento); font-weight: 600; }

dl.datos { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; margin: 0; }
dl.datos dt { color: var(--suave); font-size: 13px; }
dl.datos dd { margin: 0; }
.cabecera-ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.responsable { border-top: 1px dashed var(--borde); padding-top: 16px; margin-top: 16px; }
.responsable:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.oculto { display: none !important; }
.solo-movil { display: none; }

@media (max-width: 640px) {
  .barra { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
  .barra nav { order: 3; flex-basis: 100%; }
  .solo-movil { display: inline; }
  .solo-escritorio { display: none; }
  .barra .usuario { margin-left: auto; }
  dl.datos { grid-template-columns: 1fr; }
  dl.datos dt { margin-top: 6px; }
}

.fila-accion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.form-linea { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.form-linea select { width: auto; min-width: 160px; }
td.acciones { white-space: nowrap; }
td.acciones form { display: inline-block; margin: 2px 4px 2px 0; }
td.acciones .boton { padding: 5px 10px; font-size: 13px; }
tr.propuesto td { background: #fffaf0; }

details.seccion { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 10px; }
details.seccion > summary {
  cursor: pointer; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 600; list-style: none;
}
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::after { content: "▸"; color: var(--suave); }
details.seccion[open] > summary::after { content: "▾"; }
details.seccion .cuerpo { padding: 0 18px 16px; }
.contador { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--aviso-suave); color: var(--aviso); margin-left: auto; }
.contador.cero { background: var(--acento-suave); color: var(--acento); }
.pendiente-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--borde); }
.pendiente-item:first-child { border-top: none; }

.resumen { margin: 0 0 16px; }
/* Barra de días (vistas de varios días): fija arriba para saltar de un día a otro */
.barra-dias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; position: sticky; top: 0; z-index: 5; background: var(--fondo); padding: 6px 0; }
.barra-dias a { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--tarjeta); text-decoration: none; color: inherit; line-height: 1.2; }
.barra-dias a span { font-weight: 600; }
.barra-dias a small { color: var(--suave); font-size: 12px; }
.barra-dias a:hover { border-color: var(--acento); }
.barra-dias a.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.barra-dias a.activo small { color: #fff; }
.barra-dias a.vacio { opacity: .55; }
.resumen a.chip { text-decoration: none; }
table.agenda td.hora { width: 60px; font-variant-numeric: tabular-nums; font-weight: 600; }
table.agenda td:last-child { width: 30%; }
/* Cada profesional con el color de su calendario de Google */
table.agenda tr[style] td { background: color-mix(in srgb, var(--color-cal) 16%, white); }
table.agenda tr[style]:hover td { background: color-mix(in srgb, var(--color-cal) 26%, white); }
table.agenda tr[style] td.hora { border-left: 5px solid var(--color-cal); }
.chip.resaltado { background: #fff1b8; color: #6b4e00; border: 1.5px solid #e0b100; font-weight: 700; }
.muestras { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.muestras button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.muestras button.elegido { border-color: #222; box-shadow: 0 0 0 2px #fff inset; }
.muestras input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--borde); border-radius: 6px; }
.leyenda-colores { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--suave); margin: 0 0 12px; }
.leyenda-colores span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--color-cal); vertical-align: -1px; }
.aviso-linea { color: var(--aviso); display: inline-block; margin-right: 6px; }
.opciones-enlace { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.opciones-enlace form { display: flex; align-items: center; gap: 8px; }
.nuevo-paciente { padding: 12px 0; border-top: 1px solid var(--borde); }
.nuevo-paciente:first-of-type { border-top: none; padding-top: 0; }
.check-boton {
  font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde); background: #fff; color: var(--suave);
}
.check-boton.hecho { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }

.lista-comprobacion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.lista-comprobacion form { display: inline-flex; align-items: center; gap: 6px; }
.etiqueta-grupo { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); width: 72px; }
a.check-boton { text-decoration: none; }
.forma-pago select { width: auto; padding: 3px 8px; font-size: 13px; }

a.enlace-chip { text-decoration: none; }
.boton-pequeno { padding: 4px 10px; font-size: 13px; }
.borrador textarea { font-family: inherit; line-height: 1.5; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* Filtros y pestañas con el estilo de la web de Colev */
.filtros select, .filtros input[type=search] { width: auto; min-width: 200px; }
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pestanas a {
  margin: 0; padding: 5px 14px; border-radius: 30px; border: 1.5px solid var(--borde);
  color: var(--titulos); font-family: var(--fuente-titulos); font-weight: 500; font-size: 13px; background: #fff;
}
.pestanas a:hover { border-color: var(--acento); color: var(--acento); }
.pestanas a.activo { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.tarjeta { box-shadow: 0 1px 2px rgba(32, 42, 48, .04); }
details.seccion > summary { font-family: var(--fuente-titulos); color: var(--titulos); }
/* Registro de cambios */
table.registro td.hora { width: 90px; white-space: nowrap; }
ul.cambios { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
ul.cambios del { color: var(--suave); }