/* componentes.css — piezas reutilizables: tarjetas, tablas, formularios,
 * botones, distintivos, avisos, panel lateral y mensajes emergentes. */

/* ── Tarjeta ──────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.tarjeta__cabecera {
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}

.tarjeta__cuerpo { padding: var(--e5); }

/* LA FIRMA DE ESTA INTERFAZ.
 * Todo bloque que muestre información de salud lleva esta banda morada. No es
 * adorno: enseña al personal a reconocer de un vistazo cuándo está viendo un
 * dato clínico, que es la misma frontera que el backend defiende con el
 * permiso `expediente_ver`. Si esta clase aparece en algo que no es dato de
 * salud, pierde todo su valor. */
.clinico {
  border-left: 3px solid var(--clinico);
  background: var(--clinico-tenue);
}

.clinico__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clinico);
  margin-bottom: var(--e2);
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  min-height: 40px;           /* alcanzable con el dedo en una tableta */
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--accion);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.boton:hover { background: var(--accion-viva); }

.boton:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.boton--linea {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--tinta);
}

.boton--linea:hover {
  background: var(--papel-hundido);
  border-color: var(--tinta-tenue);
}

.boton--peligro {
  background: transparent;
  border-color: var(--alerta);
  color: var(--alerta);
}

.boton--peligro:hover { background: var(--alerta-tenue); }

.boton--pequeno {
  min-height: 32px;
  padding: var(--e1) var(--e3);
  font-size: var(--t-sm);
}

.acciones {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
}

/* ── Formularios ──────────────────────────────────────────────────────── */
.campo { margin-bottom: var(--e4); }

.campo__etiqueta {
  display: block;
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: var(--e1);
}

.campo__ayuda {
  display: block;
  font-size: var(--t-xs);
  color: var(--tinta-tenue);
  margin-top: var(--e1);
}

.campo__error {
  display: block;
  font-size: var(--t-sm);
  color: var(--alerta);
  margin-top: var(--e1);
  font-weight: 500;
}

.entrada, .seleccion, .area {
  width: 100%;
  padding: var(--e2) var(--e3);
  min-height: 40px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
}

.entrada:focus, .seleccion:focus, .area:focus {
  border-color: var(--accion);
  outline: 2px solid var(--accion-tenue);
  outline-offset: 0;
}

.entrada[aria-invalid="true"] { border-color: var(--alerta); }

.area { min-height: 96px; resize: vertical; }

.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  font-size: var(--t-sm);
}

.casilla input { margin-top: 3px; }

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

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}

.tabla th {
  text-align: left;
  padding: var(--e3) var(--e4);
  background: var(--papel-hundido);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.tabla td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla tbody tr:hover { background: var(--papel-hundido); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .numero { text-align: right; }

/* ── Distintivos ──────────────────────────────────────────────────────── */
.distintivo {
  display: inline-block;
  padding: 2px var(--e2);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--papel-hundido);
  color: var(--tinta-suave);
  white-space: nowrap;
}

.distintivo--alerta { background: var(--alerta-tenue); color: var(--alerta); }
.distintivo--aviso  { background: var(--aviso-tenue);  color: var(--aviso); }
.distintivo--logro  { background: var(--logro-tenue);  color: var(--logro); }
.distintivo--clinico { background: var(--clinico-tenue); color: var(--clinico); }

/* ── Avisos ───────────────────────────────────────────────────────────── */
.aviso {
  padding: var(--e3) var(--e4);
  border-radius: var(--radio);
  border-left: 3px solid var(--tinta-tenue);
  background: var(--papel-hundido);
  font-size: var(--t-sm);
}

.aviso--alerta { border-color: var(--alerta); background: var(--alerta-tenue); }
.aviso--aviso  { border-color: var(--aviso);  background: var(--aviso-tenue); }
.aviso__titulo { font-weight: 700; display: block; margin-bottom: 2px; }

/* ── Barra de cupo del plan ───────────────────────────────────────────── */
.cupo { min-width: 180px; }

.cupo__texto {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-bottom: var(--e1);
}

.cupo__barra {
  height: 6px;
  background: var(--papel-hundido);
  border-radius: 999px;
  overflow: hidden;
}

/* El ancho lo fija el JS con una variable CSS, no con un atributo style:
 * así no hace falta 'unsafe-inline' en la política de seguridad. */
.cupo__relleno {
  height: 100%;
  width: var(--relleno, 0%);
  background: var(--accion);
  border-radius: 999px;
  transition: width .2s ease;
}

.cupo--avisar .cupo__relleno   { background: var(--aviso); }
.cupo--excedido .cupo__relleno { background: var(--alerta); }

/* ── Estados vacíos y de carga ────────────────────────────────────────── */
.vacio {
  padding: var(--e7) var(--e5);
  text-align: center;
  color: var(--tinta-suave);
}

.vacio__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-md);
  color: var(--tinta);
  margin-bottom: var(--e2);
}

.cargando {
  padding: var(--e6);
  text-align: center;
  color: var(--tinta-tenue);
}

/* ── Panel lateral (altas y ediciones) ────────────────────────────────── */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 23, .38);
  display: flex;
  justify-content: flex-end;
  z-index: 40;
}

.panel {
  background: var(--superficie);
  width: min(520px, 100%);
  height: 100%;
  overflow-y: auto;
  box-shadow: var(--sombra-alta);
  display: flex;
  flex-direction: column;
}

.panel__cabecera {
  padding: var(--e5);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  position: sticky;
  top: 0;
  background: var(--superficie);
}

.panel__cuerpo { padding: var(--e5); flex: 1; }

.panel__pie {
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--borde);
  display: flex;
  gap: var(--e2);
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: var(--superficie);
}

.cerrar {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta-tenue);
  padding: var(--e1) var(--e2);
  border-radius: var(--radio);
}

.cerrar:hover { background: var(--papel-hundido); color: var(--tinta); }

/* ── Mensajes emergentes ──────────────────────────────────────────────── */
.avisos-flotantes {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  z-index: 60;
  max-width: min(420px, calc(100vw - 32px));
}

.flotante {
  padding: var(--e3) var(--e4);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--papel);
  box-shadow: var(--sombra-alta);
  font-size: var(--t-sm);
  animation: entrar .16s ease;
}

.flotante--alerta { background: var(--alerta); }
.flotante--logro  { background: var(--logro); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}