/* =====================================================================
   HOJA DE ESTILOS — Plataforma SaaS de agendamiento y CRM

   Convención de nombres: bloque__elemento y bloque--modificador (BEM).
   El prefijo del bloque evita que dos cosas distintas terminen
   llamándose igual — pasó dos veces con .acceso y .panel, y en ambos
   casos una pantalla pisó los estilos de la otra.
   ===================================================================== */

:root {
  /* Sin esto, un navegador en modo oscuro pinta los controles nativos
     (select, input, checkbox) con SU paleta y quedan texto claro sobre
     fondo claro. La interfaz está diseñada en claro, así que se declara. */
  color-scheme: light;

  --tinta: #101c26;
  --tinta-suave: #2b3d4a;
  --papel: #f2f3ef;
  --superficie: #ffffff;
  --linea: #d9ded6;
  --agenda: #1f6f5c;
  --agenda-clara: #e4efeb;
  --alerta: #a03a26;
  --alerta-clara: #f7e8e4;
  --ambar: #BA7517;
  --ambar-claro: #FBF0E5;
  --texto: #101c26;
  --texto-tenue: #5c6b74;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --cuerpo: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --radio: 4px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.25rem; }

.apoyo {
  color: var(--texto-tenue);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
}

.mono { font-family: var(--mono); font-size: 0.875rem; }

.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;
}

/* =====================================================================
   PANTALLA DE ACCESO (login y cambio de contraseña)
   OJO: .panel de aquí es el costado oscuro del login. Los contenedores
   de pestañas usan .contenido-pestana, NO .panel, para no chocar.
   ===================================================================== */

.pagina-acceso { min-height: 100vh; }

.acceso {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  min-height: 100vh;
}

.panel {
  background: var(--tinta);
  color: var(--papel);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.panel__marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.panel__pie {
  margin: auto 0 0;
  color: #8fa3ad;
  font-size: 0.9375rem;
  max-width: 26ch;
}

.franja { display: flex; flex-direction: column; gap: 0.5rem; }

.franja__hora {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: #7f96a2;
}

.franja__hora i {
  flex: 1;
  height: 2px;
  background: var(--tinta-suave);
  display: block;
}

.franja__hora--tomada { color: var(--papel); }
.franja__hora--tomada i { background: var(--agenda); height: 10px; border-radius: 1px; }

/* La animación se desactiva si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .franja__hora { animation: entra 0.5s ease both; }
  .franja__hora:nth-child(2) { animation-delay: 0.06s; }
  .franja__hora:nth-child(3) { animation-delay: 0.12s; }
  .franja__hora:nth-child(4) { animation-delay: 0.18s; }
  .franja__hora:nth-child(5) { animation-delay: 0.24s; }
  .franja__hora:nth-child(6) { animation-delay: 0.30s; }
  .franja__hora:nth-child(7) { animation-delay: 0.36s; }
}

@keyframes entra {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

.formulario {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 26rem;
  width: 100%;
}

.formulario__cabecera { margin-bottom: 2rem; }

.nota-pie {
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: var(--texto-tenue);
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
}

@media (max-width: 720px) {
  .acceso { grid-template-columns: 1fr; }
  .panel { padding: 2rem 1.5rem; }
  .franja { display: none; }
  .formulario { padding: 2rem 1.5rem; }
}

/* Lista de empresas cuando alguien pertenece a más de una. */
.empresas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }

.empresa {
  width: 100%;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.875rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--agenda);
  border-radius: 0;
  cursor: pointer;
}

.empresa:hover { border-color: var(--agenda); border-left-color: var(--agenda); }
.empresa:focus-visible { outline: 2px solid var(--agenda); outline-offset: 2px; }
.empresa[disabled] { opacity: 0.55; cursor: progress; }

.empresa__nombre { font-weight: 600; font-size: 1rem; }
.empresa__detalle { font-family: var(--mono); font-size: 0.75rem; color: var(--texto-tenue); }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */

.campo { margin-bottom: 1.25rem; }

.campo label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.375rem;
}

.campo input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.campo input:focus-visible {
  outline: 2px solid var(--agenda);
  outline-offset: 1px;
  border-color: var(--agenda);
}

.pista {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--texto-tenue);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.25rem;
}

/* Para <select> y <textarea>, que no heredan de .campo input. */
.entrada {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.entrada:focus-visible { outline: 2px solid var(--agenda); outline-offset: 1px; }

.entrada--mini {
  width: auto;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.entrada--elegido { background: var(--agenda-clara); color: var(--agenda); font-weight: 500; }

textarea.entrada { font-family: inherit; resize: vertical; }
select[multiple] { padding: 0.25rem; }

/* Formulario en una sola línea, para agregar items rápido. */
.fila-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.fila-form .campo { margin-bottom: 0; flex: 1 1 10rem; }

.grupo {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  margin: 0 0 1.25rem;
}

.grupo legend {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: 0 0.375rem;
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 1.25rem;
  font-size: 0.9375rem;
}

/* =====================================================================
   BOTONES
   ===================================================================== */

.boton {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--papel);
  cursor: pointer;
}

.boton:hover { background: var(--tinta-suave); border-color: var(--tinta-suave); }
.boton:focus-visible { outline: 2px solid var(--agenda); outline-offset: 2px; }
.boton[disabled] { opacity: 0.55; cursor: progress; }

.boton--borde { background: transparent; color: var(--tinta); }
.boton--borde:hover { background: var(--superficie); }

.boton--texto {
  background: transparent;
  border-color: transparent;
  color: var(--texto-tenue);
  padding: 0.375rem 0.5rem;
}
.boton--texto:hover { background: transparent; color: var(--texto); }

.boton--mini { font-size: 0.75rem; padding: 0.25rem 0.625rem; }

.acciones { margin-top: 0.5rem; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.volver {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  margin-bottom: 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--texto-tenue);
  cursor: pointer;
}

.volver:hover { color: var(--texto); }
.volver:focus-visible { outline: 2px solid var(--agenda); outline-offset: 2px; }

/* Botones de icono: SVG inline con aria-label, no imágenes. */
.icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
}

.icono svg { width: 18px; height: 18px; }

.icono svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono:hover { background: var(--papel); color: var(--texto); border-color: var(--linea); }
.icono:focus-visible { outline: 2px solid var(--agenda); outline-offset: 1px; }
.icono--alerta:hover { color: var(--alerta); }

/* =====================================================================
   AVISOS
   ===================================================================== */

.aviso {
  margin: 0 0 1rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  border-left: 3px solid var(--alerta);
  background: var(--alerta-clara);
  color: var(--alerta);
}

.aviso--bien {
  border-left-color: var(--agenda);
  background: var(--agenda-clara);
  color: var(--agenda);
}

/* Aviso que además lleva botones de acción. */
.aviso--con-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.aviso--con-acciones .fila-botones:empty { display: none; }

/* =====================================================================
   ESTRUCTURA DE PÁGINA
   ===================================================================== */

.cargando {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--texto-tenue);
  font-size: 0.9375rem;
}

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--tinta);
  color: var(--papel);
}

.barra__marca {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
}

.barra__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-right: auto; margin-left: 1.5rem; }

.barra__nav a {
  color: #8fa3ad;
  text-decoration: none;
  font-size: 0.875rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.barra__nav a:hover { color: var(--papel); }
.barra__nav a[aria-current="page"] { color: var(--papel); border-bottom-color: var(--agenda); }
.barra__nav a:focus-visible { outline: 2px solid var(--agenda); outline-offset: 3px; }

.barra__derecha { display: flex; align-items: center; gap: 0.75rem; }
.barra__usuario { font-size: 0.875rem; color: #8fa3ad; }

/* La barra es oscura y su color se hereda. Estos elementos viven dentro
   de ella pero tienen fondo propio, así que fijan su color a mano para
   no quedar en texto claro sobre fondo claro. */
.barra .ficha { background: var(--tinta-suave); color: var(--papel); }
.barra .boton--texto { color: #8fa3ad; }
.barra .boton--texto:hover { color: var(--papel); }

.selector {
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.3125rem 0.5rem;
  color: var(--papel);
  background: var(--tinta-suave);
  border: 1px solid var(--tinta-suave);
  border-radius: var(--radio);
  max-width: 14rem;
}

.selector:focus-visible { outline: 2px solid var(--agenda); outline-offset: 2px; }

.tablero {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tablero--ancho { max-width: 64rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.75rem;
}

.tarjeta form { margin-top: 1.25rem; }
.tarjeta--identidad { border-left: 3px solid var(--agenda); }

.encabezado-seccion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.subtitulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--linea);
}

.detalle__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 520px) {
  .tarjeta { padding: 1.25rem; }
}

/* =====================================================================
   PESTAÑAS
   ===================================================================== */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--linea);
}

.pestana {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.5rem 0.875rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-tenue);
  cursor: pointer;
}

.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--agenda); }
.pestana:focus-visible { outline: 2px solid var(--agenda); outline-offset: 2px; }

.pestanas--grandes .pestana {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  padding: 0.5rem 1rem 0.75rem;
}

/* Se llama así y no .panel porque esa clase ya la usa el costado
   oscuro del login: repetirla pintaba de negro el contenido. */
.contenido-pestana { display: block; }

/* =====================================================================
   DATOS Y FICHAS
   ===================================================================== */

.datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 1.5rem 0 0;
}

.datos dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 0.375rem;
}

.datos dd { margin: 0; }

.fichas { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.ficha {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: var(--agenda-clara);
  color: var(--agenda);
  border-radius: 2px;
  white-space: nowrap;
}

.ficha--alerta { background: var(--alerta-clara); color: var(--alerta); }
.ficha--tenue { background: var(--papel); color: var(--texto-tenue); }

/* Indicadores numéricos del perfil de cliente. */
.indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.indicador { display: flex; flex-direction: column; gap: 2px; }

.indicador__numero {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.indicador__texto {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* =====================================================================
   TABLAS
   ===================================================================== */

.tabla-envoltura { overflow-x: auto; margin-top: 1.25rem; }

.tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.tabla th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabla td {
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

.tabla tr:last-child td { border-bottom: 0; }

/* Los botones de acción de una fila van juntos y no se estiran. */
.tabla td .boton--mini { margin-right: 0.375rem; }
.tabla td .boton--mini:last-child { margin-right: 0; }

.fila-clicable { cursor: pointer; }
.fila-clicable:hover td { background: var(--papel); }
.fila-tenue { opacity: 0.55; }

.fila-activa td {
  background: var(--agenda-clara);
  box-shadow: inset 3px 0 0 var(--agenda);
}

/* =====================================================================
   LISTAS DE ITEMS (prestadores, servicios, personas)
   ===================================================================== */

.items { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.375rem; }

.items li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--papel);
  border-left: 2px solid var(--agenda);
}

.items li:empty { display: none; }

/* El detalle empuja los botones al extremo derecho, y estos quedan
   agrupados sin importar cuánto ocupe el texto de la izquierda. Antes
   cada botón llevaba margin-left:auto por separado y se desalineaban. */
.items li .item__detalle { margin-right: auto; }
.items li .boton { flex-shrink: 0; }

.item__titulo { font-weight: 600; font-size: 0.9375rem; }
.item__detalle { font-family: var(--mono); font-size: 0.75rem; color: var(--texto-tenue); }

/* Listas de fichas grandes: empresas, clientes. */
.fichas-empresa { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }

.ficha-empresa {
  display: flex;
  align-items: stretch;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--agenda);
  border-radius: var(--radio);
}

.ficha-empresa--inactiva { border-left-color: var(--texto-tenue); opacity: 0.7; }

.ficha-empresa__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--texto);
}

.ficha-empresa__cuerpo:focus-visible { outline: 2px solid var(--agenda); outline-offset: -2px; }

.ficha-empresa__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.ficha-empresa__meta { font-family: var(--mono); font-size: 0.75rem; color: var(--texto-tenue); }

.ficha-empresa__acciones {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.75rem;
  border-left: 1px solid var(--linea);
}

/* Listas de texto con autor y fecha: observaciones, interacciones. */
.observaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.observaciones li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.75rem;
  background: var(--superficie);
  border-left: 2px solid var(--linea);
  font-size: 0.875rem;
}

.observaciones__meta { font-family: var(--mono); font-size: 0.6875rem; color: var(--texto-tenue); }
.observaciones__vacio { color: var(--texto-tenue); font-style: italic; border-left-color: transparent; }

/* =====================================================================
   BUSCADOR CON RESULTADOS
   ===================================================================== */

.resultados {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  max-height: 14rem;
  overflow-y: auto;
  background: var(--superficie);
}

.resultado {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--texto);
}

.resultado:hover { background: var(--agenda-clara); }
.resultado:focus-visible { outline: 2px solid var(--agenda); outline-offset: -2px; }
.resultado__datos { font-family: var(--mono); font-size: 0.6875rem; color: var(--texto-tenue); }
.resultado__vacio { padding: 0.5rem 0.75rem; color: var(--texto-tenue); font-size: 0.875rem; }

#c-cliente-elegido-caja { display: flex; align-items: center; gap: 0.5rem; }

/* =====================================================================
   CALENDARIO SEMANAL
   Siete columnas con CSS Grid, sin librerías externas.
   ===================================================================== */

.calendario-envoltura { overflow-x: auto; margin: 0 -0.25rem; }

.calendario {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  min-width: 840px;
}

.dia {
  background: var(--superficie);
  min-height: 160px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.dia--hoy { background: var(--agenda-clara); }

.dia__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--linea);
}

.dia__nombre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.dia__numero { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.dia--hoy .dia__numero { color: var(--agenda); }
.dia__vacio { color: var(--linea); font-size: 0.875rem; text-align: center; margin-top: 1rem; }

.turno {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 0.375rem 0.5rem;
  background: var(--papel);
  border: 0;
  border-left: 3px solid var(--texto-tenue);
  border-radius: 2px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--texto);
}

.turno:hover { background: var(--linea); }
.turno:focus-visible { outline: 2px solid var(--agenda); outline-offset: 1px; }

.turno__hora { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; }
.turno__servicio { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.turno__cliente { font-size: 0.75rem; color: var(--texto-tenue); }

.turno--confirmada { border-left-color: var(--agenda); background: var(--agenda-clara); }
.turno--pendiente { border-left-color: var(--ambar); }
.turno--completada { border-left-color: var(--tinta); }
.turno--rechazada, .turno--cancelada, .turno--no_asistio {
  border-left-color: var(--alerta);
  opacity: 0.6;
}

@media (max-width: 640px) {
  .calendario { min-width: 640px; grid-template-columns: repeat(7, minmax(90px, 1fr)); }
  .dia { min-height: 120px; padding: 0.375rem; }
}

/* Detalle del turno seleccionado. */
.detalle-turno {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--agenda);
  border-radius: var(--radio);
}

.detalle-turno__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.detalle-turno .fila-form { border-top: 0; padding-top: 0.875rem; margin-top: 0.875rem; }
.detalle-turno .subtitulo { margin-top: 1.25rem; }

/* Reservar en tres pasos: servicio, día, hora libre. */
.reservar {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}

.reservar .fila-form { border-top: 0; padding-top: 0; margin-top: 0; }
.reservar .subtitulo { margin-top: 0; }

.horas { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }

.hora {
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}

.hora:hover { background: var(--agenda-clara); border-color: var(--agenda); color: var(--agenda); }
.hora:focus-visible { outline: 2px solid var(--agenda); outline-offset: 1px; }
.hora[disabled] { opacity: 0.45; cursor: progress; }

/* =====================================================================
   CRM: casos, prioridades y estados
   ===================================================================== */

.dc-descripcion {
  margin: 1rem 0;
  padding: 0.875rem 1rem;
  background: var(--papel);
  border-left: 2px solid var(--linea);
  font-size: 0.9375rem;
  white-space: pre-wrap;
}

.prioridad-critica { background: var(--alerta-clara); color: var(--alerta); font-weight: 600; }
.prioridad-alta { background: var(--ambar-claro); color: var(--ambar); }
.prioridad-media, .prioridad-baja { background: var(--papel); color: var(--texto-tenue); }

.estado-abierto { background: var(--ambar-claro); color: var(--ambar); }
.estado-en_proceso { background: var(--agenda-clara); color: var(--agenda); }
.estado-escalado { background: var(--alerta-clara); color: var(--alerta); }
.estado-resuelto, .estado-cerrado { background: var(--papel); color: var(--texto-tenue); }

/* =====================================================================
   ACCESOS DE LA PANTALLA DE INICIO
   Se llaman .atajo y NO .acceso: esa clase ya la usa el layout de dos
   columnas del login, y repetir el nombre apilaba el formulario.
   ===================================================================== */

.accesos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.atajo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--agenda);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--texto);
}

.atajo:hover { border-color: var(--agenda); }
.atajo:focus-visible { outline: 2px solid var(--agenda); outline-offset: 2px; }

.atajo__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--texto);
}

.atajo__detalle { font-size: 0.9375rem; color: var(--texto-tenue); }

/* =====================================================================
   EDITOR DE ROLES
   ===================================================================== */

.rol-tarjeta { margin-bottom: 1rem; }
.rol-tarjeta .encabezado-seccion { margin-bottom: 1rem; }
.rol-tarjeta .grupo { margin-bottom: 0.75rem; }

.casilla--permiso {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.375rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.casilla--permiso input { flex-shrink: 0; }

.casilla__codigo {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--texto-tenue);
  margin-left: auto;
  padding-left: 1rem;
}

/* =====================================================================
   MAPA DEL CLIENTE (Leaflet + OpenStreetMap)
   ===================================================================== */

.ubicacion { margin-top: 1rem; display: grid; gap: 0.5rem; }
.ubicacion a.boton { text-decoration: none; }

.mapa {
  height: 260px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* El mapa crea capas con z-index alto; esto las deja debajo de la barra */
  position: relative;
  z-index: 0;
}

.ubicacion-editar .mapa { height: 320px; margin-top: 0.75rem; }
.ubicacion-editar .pista { margin: 0.25rem 0 0.5rem; }

.lista-lugares {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.lista-lugares button {
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--texto);
  cursor: pointer;
}

.lista-lugares button:hover,
.lista-lugares button:focus-visible { border-color: var(--agenda); background: var(--agenda-clara); }

/* =====================================================================
   LLAMAR AL CLIENTE (link tel:)
   ===================================================================== */

.llamar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--agenda);
  border-radius: var(--radio);
  background: var(--agenda-clara);
  color: var(--agenda);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  /* Tamaño minimo para tocarlo facil con el dedo */
  min-height: 2.5rem;
}

.llamar:hover, .llamar:focus-visible { background: var(--agenda); color: var(--superficie); }
.llamar--mini { padding: 0.25rem 0.625rem; min-height: 2rem; font-size: 0.8125rem; }

.contacto-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }

/* Boton redondo solo con el icono del telefono */
.llamar--icono {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.llamar--icono svg { width: 20px; height: 20px; }

/* Fila "Cliente: nombre" en el detalle del turno y del caso */
.fila-cliente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}
.fila-cliente__datos { display: grid; gap: 0.125rem; min-width: 0; }
.fila-cliente__etiqueta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.fila-cliente__nombre { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
a.fila-cliente__nombre { color: var(--agenda); text-decoration: none; }
a.fila-cliente__nombre:hover, a.fila-cliente__nombre:focus-visible { text-decoration: underline; }

/* =====================================================================
   SERVICIOS POR REPETIR (agenda)
   ===================================================================== */

/* Turnos y casos del perfil del cliente que llevan a su detalle */
.observaciones li.observaciones__item--enlace { padding: 0; }
.observaciones__enlace {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 2rem 0.625rem 0.875rem;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.observaciones__enlace::after {
  content: '›';
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--texto-tenue);
}
.observaciones__enlace:hover, .observaciones__enlace:focus-visible { background: var(--agenda-clara); }

.lista-repetir { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.repetir-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.repetir-item__datos { flex: 1 1 14rem; display: grid; gap: 0.125rem; }
.repetir-item__titulo { font-weight: 600; }
.repetir-item__meta { font-size: 0.8125rem; color: var(--texto-tenue); }
.repetir-item--vencido { border-color: var(--ambar); background: var(--ambar-claro); }

/* Configuracion > Notificaciones: botones para meter variables en el mensaje */
.config-variables { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.config-variables .boton { font-family: var(--mono); font-size: 0.8rem; }

/* Configuracion: el select de dias, semanas o meses no ocupa todo el ancho */
.config-servicio__precio select.entrada { width: auto; min-width: 8rem; }

/* =====================================================================
   RECORDATORIOS PUSH (perfil y configuracion)
   ===================================================================== */

.recordatorio-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.recordatorio-tiempo { max-width: 22rem; }

/* =====================================================================
   UTILIDAD FINAL
   Va de últimas a propósito: el atributo hidden debe ganarle a
   cualquier regla de display definida más arriba en el archivo.
   ===================================================================== */

[hidden] { display: none !important; }