/* =====================================================
   DIENTES POR SIEMPRE
   DISEÑO GENERAL
===================================================== */

:root {
  --negro: #11100e;
  --negro-suave: #1c1a17;

  --dorado: #cda85b;
  --dorado-claro: #ead39a;
  --dorado-suave: #f4ead1;

  --marfil: #faf8f3;
  --crema: #f5f1e8;

  --blanco: #ffffff;

  --texto: #201f1c;
  --texto-suave: #706c64;
  --texto-muy-suave: #99938a;

  --borde: #e8e2d8;

  --verde: #28b66f;
  --verde-suave: #e8f8ef;

  --azul-suave: #eef4ff;
  --rojo-suave: #fff0ed;
  --amarillo-suave: #fff7df;

  --sombra:
    0 24px 70px rgba(36, 30, 18, 0.11);

  --sombra-suave:
    0 10px 32px rgba(34, 29, 20, 0.07);

  --radio-grande: 30px;
  --radio: 18px;
  --radio-pequeno: 12px;
}


/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

  color: var(--texto);

  background: var(--marfil);

  -webkit-font-smoothing: antialiased;
}


button,
input {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   PÁGINA DEL CHAT
===================================================== */

.chat-page {
  min-height: 100vh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(205, 168, 91, 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(205, 168, 91, 0.08),
      transparent 26%
    ),
    var(--marfil);

  position: relative;
}


.fondo-decorativo {
  position: fixed;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(1px);

  opacity: 0.5;
}


.fondo-1 {
  width: 330px;
  height: 330px;

  left: -190px;
  top: 8%;

  border:
    1px solid rgba(205, 168, 91, 0.24);
}


.fondo-2 {
  width: 430px;
  height: 430px;

  right: -250px;
  bottom: -80px;

  border:
    1px solid rgba(205, 168, 91, 0.2);
}


.chat-layout {
  min-height: 100vh;

  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(430px, 0.9fr);

  align-items: center;

  gap: 68px;

  padding:
    45px 0;
}


/* =====================================================
   BLOQUE IZQUIERDO
===================================================== */

.marca-panel {
  min-width: 0;

  display: flex;

  align-items: center;
}


.marca-contenido {
  width: 100%;
}


.logo-grande {
  width: 200px;
  height: 112px;

  overflow: hidden;

  border-radius: 18px;

  background: #090909;

  margin-bottom: 30px;

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.16);
}


.logo-grande img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 50%;
}


.marca-etiqueta {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #9e7c38;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2.3px;

  text-transform: uppercase;

  margin-bottom: 15px;
}


.marca-etiqueta::before {
  content: "";

  width: 32px;
  height: 1px;

  background: var(--dorado);
}


.marca-panel h1 {
  max-width: 540px;

  margin:
    0 0 20px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      42px,
      5vw,
      68px
    );

  line-height: 0.98;

  letter-spacing: -2px;

  font-weight: 500;

  color: var(--negro);
}


.marca-panel h1 span {
  color: #b99044;

  display: block;

  font-style: italic;
}


.marca-descripcion {
  max-width: 470px;

  margin:
    0 0 28px;

  color: var(--texto-suave);

  font-size: 17px;

  line-height: 1.7;
}


.servicios-marca {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  max-width: 510px;

  margin-bottom: 38px;
}


.servicio-mini {
  padding:
    10px 14px;

  background:
    rgba(255, 255, 255, 0.7);

  border:
    1px solid var(--borde);

  border-radius: 100px;

  font-size: 13px;

  font-weight: 600;

  color: #514c43;
}


.servicio-mini span {
  color: var(--dorado);

  margin-right: 5px;
}


.marca-pie {
  display: flex;

  align-items: center;

  gap: 13px;

  color: var(--texto-suave);
}


.ubicacion-icono {
  width: 43px;
  height: 43px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--negro);

  color: var(--dorado-claro);

  font-size: 22px;
}


.marca-pie div:last-child {
  display: flex;

  flex-direction: column;

  gap: 2px;
}


.marca-pie strong {
  color: var(--texto);

  font-size: 14px;
}


.marca-pie span {
  font-size: 12px;
}


/* =====================================================
   CONTENEDOR CHAT
===================================================== */

.app {
  width: 100%;
  max-width: 560px;

  height: min(
    760px,
    calc(100vh - 70px)
  );

  min-height: 620px;

  margin-left: auto;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(205, 168, 91, 0.24);

  border-radius: var(--radio-grande);

  background: var(--blanco);

  box-shadow: var(--sombra);

  position: relative;
}


/* =====================================================
   CABECERA CHAT
===================================================== */

.header {
  min-height: 114px;

  padding:
    20px 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  background:
    linear-gradient(
      135deg,
      #11100e,
      #242018
    );

  color: white;

  border-bottom:
    1px solid
    rgba(234, 211, 154, 0.16);
}


.header-marca {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 14px;
}


.avatar-bot {
  flex:
    0 0 62px;

  width: 62px;
  height: 62px;

  overflow: hidden;

  border-radius: 50%;

  background: #090909;

  border:
    1px solid
    rgba(234, 211, 154, 0.45);

  box-shadow:
    0 0 0 4px
    rgba(205, 168, 91, 0.08);
}


.avatar-bot img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(2);

  object-position: center 52%;
}


.header-info {
  min-width: 0;
}


.nombre-superior {
  display: block;

  color: var(--dorado-claro);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.8px;

  margin-bottom: 3px;
}


.header h2 {
  margin:
    0 0 5px;

  font-size: 21px;

  letter-spacing: -0.3px;
}


.header p {
  margin: 0;

  color: #ccc6ba;

  font-size: 12px;

  display: flex;

  align-items: center;

  gap: 6px;
}


.punto-online {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #35d27d;

  box-shadow:
    0 0 0 3px
    rgba(53, 210, 125, 0.13);
}


.header-acciones {
  display: flex;

  gap: 8px;

  flex-shrink: 0;
}


.boton-icono {
  width: 41px;
  height: 41px;

  border-radius: 50%;

  border:
    1px solid
    rgba(234, 211, 154, 0.2);

  background:
    rgba(255, 255, 255, 0.06);

  color: white;

  display: flex;

  align-items: center;
  justify-content: center;

  text-decoration: none;

  cursor: pointer;

  font-size: 22px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border 0.2s ease;
}


.boton-icono:hover {
  transform:
    translateY(-2px);

  background:
    rgba(205, 168, 91, 0.14);

  border-color:
    rgba(234, 211, 154, 0.48);
}


.boton-doctor {
  font-size: 15px;
}


/* =====================================================
   ZONA DE MENSAJES
===================================================== */

.chat {
  flex: 1;

  overflow-y: auto;

  padding:
    24px 26px 28px;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fcfaf6 100%
    );

  scrollbar-width: thin;

  scrollbar-color:
    #d7d0c3 transparent;
}


.chat::-webkit-scrollbar,
.conversacion::-webkit-scrollbar {
  width: 7px;
}


.chat::-webkit-scrollbar-thumb,
.conversacion::-webkit-scrollbar-thumb {
  background: #d5cec0;

  border-radius: 20px;
}


.inicio-chat {
  display: flex;

  gap: 13px;

  padding:
    15px 16px;

  margin-bottom: 20px;

  border:
    1px solid var(--borde);

  border-radius: 15px;

  background: #fff;
}


.saludo-icono {
  flex:
    0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  display: flex;

  justify-content: center;
  align-items: center;

  background: var(--dorado-suave);

  color: #9f7c36;
}


.inicio-chat strong {
  display: block;

  margin-bottom: 4px;

  font-size: 13px;
}


.inicio-chat p {
  margin: 0;

  color: var(--texto-suave);

  font-size: 12px;

  line-height: 1.5;
}


/* =====================================================
   MENSAJES
===================================================== */

.mensaje {
  width: fit-content;

  max-width: 82%;

  padding:
    13px 16px;

  margin-bottom: 13px;

  font-size: 14px;

  line-height: 1.55;

  border-radius: 17px;

  word-wrap: break-word;

  animation:
    aparecerMensaje
    0.22s ease;
}


@keyframes aparecerMensaje {

  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.mensaje.bot {
  margin-right: auto;

  color: #322f29;

  background: white;

  border:
    1px solid var(--borde);

  border-bottom-left-radius: 5px;

  box-shadow:
    0 5px 18px
    rgba(30, 25, 17, 0.04);
}


.mensaje.usuario {
  margin-left: auto;

  color: white;

  background:
    linear-gradient(
      135deg,
      #15130f,
      #29241b
    );

  border:
    1px solid #2f2a20;

  border-bottom-right-radius: 5px;

  box-shadow:
    0 7px 17px
    rgba(16, 14, 11, 0.12);
}


/* =====================================================
   OPCIONES RÁPIDAS
===================================================== */

.opciones-titulo {
  margin:
    25px 0 10px;

  color: #918778;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}


.opciones-rapidas {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 15px;
}


.opciones-rapidas button {
  min-height: 75px;

  padding:
    12px 13px;

  border:
    1px solid var(--borde);

  border-radius: 14px;

  background: white;

  color: var(--texto);

  cursor: pointer;

  text-align: left;

  display: flex;

  align-items: center;

  gap: 10px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.opciones-rapidas button:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--dorado);

  box-shadow:
    0 8px 24px
    rgba(61, 48, 23, 0.08);
}


.opcion-icono {
  flex:
    0 0 36px;

  width: 36px;
  height: 36px;

  border-radius: 10px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    var(--dorado-suave);

  font-size: 18px;
}


.opciones-rapidas button > span:last-child {
  display: flex;

  min-width: 0;

  flex-direction: column;

  gap: 2px;
}


.opciones-rapidas strong {
  font-size: 12px;

  line-height: 1.2;
}


.opciones-rapidas small {
  color: var(--texto-muy-suave);

  font-size: 10px;

  line-height: 1.25;
}


/* =====================================================
   ESCRIBIR MENSAJE
===================================================== */

.input-area {
  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    15px 18px 10px;

  background: white;

  border-top:
    1px solid var(--borde);
}


.input-wrapper {
  flex: 1;
}


.input-area input {
  width: 100%;

  height: 50px;

  padding:
    0 16px;

  border:
    1px solid #ded8cd;

  border-radius: 14px;

  background: #fdfcf9;

  color: var(--texto);

  outline: none;

  font-size: 14px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.input-area input:focus {
  border-color:
    #c6a256;

  box-shadow:
    0 0 0 3px
    rgba(205, 168, 91, 0.12);
}


.input-area input::placeholder {
  color: #aaa398;
}


#botonEnviar {
  min-width: 105px;

  height: 50px;

  padding:
    0 16px;

  border: none;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #171510,
      #2c261b
    );

  color: white;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 10px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


#botonEnviar:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 8px 18px
    rgba(16, 14, 10, 0.14);
}


#botonEnviar:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}


.flecha-enviar {
  color: var(--dorado-claro);

  font-size: 18px;
}


.privacidad-chat {
  padding:
    0 18px 13px;

  background: white;

  color: #a0988b;

  font-size: 9px;

  text-align: center;
}


/* =====================================================
   PANEL DEL DOCTOR
===================================================== */

.admin-body {
  min-height: 100vh;

  background:
    #f7f5f0;

  color:
    var(--texto);
}


.panel-admin {
  width:
    min(
      1450px,
      calc(100% - 50px)
    );

  margin:
    0 auto;

  padding:
    48px 0 90px;
}


.admin-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 34px;

  padding:
    25px 28px;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #11100e,
      #282219
    );

  color: white;

  box-shadow: var(--sombra-suave);
}


.admin-header h1 {
  margin:
    3px 0 7px;

  font-size: 34px;

  letter-spacing: -1px;
}


.admin-header .subtitulo {
  margin: 0;

  color: #cbc4b7;
}


.mini-titulo {
  margin: 0;

  color: #b98d3d;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;
}


.admin-header .mini-titulo {
  color: var(--dorado-claro);
}


.boton-chat {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 46px;

  padding:
    0 19px;

  border:
    1px solid
    rgba(234, 211, 154, 0.35);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.07);

  color: white;

  text-decoration: none;

  font-weight: 700;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.boton-chat:hover {
  background:
    rgba(205, 168, 91, 0.16);

  transform:
    translateY(-1px);
}


/* =====================================================
   TARJETAS RESUMEN
===================================================== */

.resumen {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

  margin-bottom: 52px;
}


.card {
  min-height: 160px;

  padding:
    24px;

  border:
    1px solid var(--borde);

  border-radius: 20px;

  background: white;

  box-shadow:
    0 7px 25px
    rgba(30, 25, 16, 0.035);
}


.card > span {
  color: var(--texto-suave);

  font-size: 14px;
}


.card h2 {
  margin:
    15px 0 4px;

  font-size: 38px;

  color: var(--negro);
}


.card p {
  margin: 0;

  color: var(--texto-muy-suave);

  font-size: 13px;
}


.alerta-card {
  border-color: #e8beb6;

  background:
    linear-gradient(
      180deg,
      white,
      #fffafa
    );
}


.seguimiento-card {
  border-color:
    #e1c47c;

  background:
    linear-gradient(
      180deg,
      white,
      #fffdf7
    );
}


/* =====================================================
   SECCIONES DEL PANEL
===================================================== */

.seccion-seguimientos {
  margin-bottom: 56px;
}


.seccion-pacientes {
  margin-top: 10px;
}


.titulo-seccion {
  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 20px;

  margin-bottom: 18px;
}


.titulo-seccion h2 {
  margin:
    5px 0 4px;

  font-size: 29px;

  letter-spacing: -0.6px;
}


.titulo-seccion p {
  margin: 0;

  color: var(--texto-suave);
}


.badge-seguimientos {
  padding:
    10px 17px;

  border-radius: 100px;

  background:
    var(--dorado-suave);

  color: #966b1b;

  font-size: 13px;

  font-weight: 800;
}


/* =====================================================
   PACIENTES
===================================================== */

#listaPacientes {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


.paciente-card {
  padding:
    25px 27px;

  border:
    1px solid var(--borde);

  border-radius: 21px;

  background: white;

  box-shadow:
    0 7px 25px
    rgba(30, 25, 16, 0.035);
}


.paciente-arriba {
  display: flex;

  align-items: center;

  gap: 16px;

  padding-bottom: 19px;

  border-bottom:
    1px solid #eee9df;
}


.avatar {
  flex:
    0 0 58px;

  width: 58px;
  height: 58px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #11100e,
      #2a251c
    );

  color: var(--dorado-claro);

  font-weight: 800;

  font-size: 18px;
}


.datos-principales {
  min-width: 0;
}


.datos-principales h3 {
  margin:
    0 0 3px;

  font-size: 20px;
}


.datos-principales p {
  margin: 0;

  color: var(--texto-suave);
}


.estado {
  margin-left: auto;

  padding:
    8px 13px;

  border-radius: 100px;

  white-space: nowrap;

  font-size: 12px;

  font-weight: 800;
}


.estado-nuevo {
  background: #edf6ff;

  color: #1670a5;
}


.estado-atendido {
  background:
    var(--verde-suave);

  color: #17804b;
}


.estado-seguimiento {
  background:
    var(--amarillo-suave);

  color: #a3650b;
}


.estado-urgente {
  background:
    var(--rojo-suave);

  color: #b64432;
}


.datos-paciente {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;

  padding:
    20px 0;
}


.datos-paciente > div {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.datos-paciente span {
  color: var(--texto-muy-suave);

  font-size: 12px;
}


.datos-paciente strong {
  font-size: 14px;
}


.mini-resumen {
  padding:
    15px 17px;

  border:
    1px solid var(--borde);

  border-radius: 13px;

  background: #faf9f6;
}


.mini-resumen span {
  color: #a1937d;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.mini-resumen p {
  margin:
    7px 0 0;

  line-height: 1.5;
}


.alerta-paciente,
.alerta-humano {
  margin-top: 13px;

  padding:
    12px 14px;

  border:
    1px solid #e7c59c;

  border-radius: 12px;

  background: #fff8ef;

  color: #8a551e;

  font-size: 13px;
}


.acciones {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 18px;
}


.btn {
  min-height: 42px;

  padding:
    0 15px;

  border: none;

  border-radius: 11px;

  cursor: pointer;

  font-weight: 700;

  font-size: 13px;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}


.btn:hover {
  transform:
    translateY(-1px);
}


.btn:disabled {
  opacity: 0.6;

  cursor: not-allowed;

  transform: none;
}


.btn-ver {
  background:
    linear-gradient(
      135deg,
      #ba9349,
      #d2b36d
    );

  color: #17130c;
}


.btn-atendido {
  background:
    var(--negro);

  color: white;
}


.btn-seguimiento,
.btn-posponer {
  background:
    #f1eee7;

  color: #39342c;
}


.btn-eliminar {
  background: transparent;

  color: #a69c8e;
}


.btn-generar {
  background:
    linear-gradient(
      135deg,
      #ae8133,
      #d3af64
    );

  color: #15110b;
}


.btn-ver-secundario,
.btn-copiar {
  background: white;

  color: #4a4338;

  border:
    1px solid var(--borde);
}


/* =====================================================
   SEGUIMIENTOS
===================================================== */

.lista-seguimientos {
  display: flex;

  flex-direction: column;

  gap: 16px;
}


.seguimiento-item {
  padding:
    22px 24px;

  border:
    1px solid #e0c375;

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fffdf7
    );
}


.seguimiento-principal {
  display: flex;

  align-items: center;

  gap: 15px;
}


.seguimiento-avatar {
  width: 52px;
  height: 52px;

  flex-basis: 52px;
}


.seguimiento-info {
  flex: 1;
}


.seguimiento-info h3 {
  margin:
    0 0 3px;
}


.seguimiento-info p {
  margin: 0;

  color: var(--texto-suave);

  font-size: 13px;
}


.seguimiento-resumen {
  margin:
    17px 0;

  padding:
    14px 16px;

  border-radius: 12px;

  background: #faf5e7;

  line-height: 1.5;
}


.mensaje-generado {
  padding:
    18px;

  margin:
    15px 0;

  border:
    1px solid #dcc486;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #fbf7ec,
      #fff
    );
}


.mensaje-generado-header {
  margin-bottom: 9px;

  color: #967027;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.3px;
}


.mensaje-generado p {
  margin: 0;

  line-height: 1.6;
}


.acciones-mensaje {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 15px;
}


.sin-seguimientos,
.sin-pacientes {
  padding:
    28px;

  border:
    1px solid var(--borde);

  border-radius: 19px;

  background: white;

  color: var(--texto-suave);
}


.sin-seguimientos {
  display: flex;

  align-items: center;

  gap: 15px;
}


.sin-seguimientos strong {
  display: block;

  color: var(--texto);

  margin-bottom: 4px;
}


.sin-seguimientos p,
.sin-pacientes p {
  margin: 0;
}


.check-grande {
  flex:
    0 0 48px;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    var(--verde-suave);

  color: #16814a;

  font-size: 25px;
}


/* =====================================================
   MODAL PACIENTE
===================================================== */

.modal {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  justify-content: flex-end;
}


.oculto {
  display: none !important;
}


.modal-fondo {
  position: absolute;

  inset: 0;

  background:
    rgba(17, 16, 14, 0.52);

  backdrop-filter:
    blur(4px);
}


.modal-contenido {
  position: relative;

  z-index: 2;

  width:
    min(
      760px,
      92vw
    );

  height: 100%;

  overflow-y: auto;

  padding:
    30px;

  background:
    #fcfbf8;

  box-shadow:
    -24px 0 80px
    rgba(15, 13, 10, 0.16);

  animation:
    modalEntrada
    0.24s ease;
}


@keyframes modalEntrada {

  from {
    transform:
      translateX(35px);

    opacity: 0;
  }

  to {
    transform:
      translateX(0);

    opacity: 1;
  }

}


.modal-abierto {
  overflow: hidden;
}


.modal-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  padding-bottom: 20px;

  border-bottom:
    1px solid var(--borde);
}


.modal-header h2 {
  margin:
    6px 0 0;

  font-size: 30px;
}


.cerrar-modal {
  width: 42px;
  height: 42px;

  border: none;

  border-radius: 50%;

  background: #eeeae1;

  color: #4f493f;

  cursor: pointer;

  font-size: 25px;
}


.perfil-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 12px;

  margin:
    22px 0;
}


.perfil-dato {
  padding:
    15px 16px;

  border:
    1px solid var(--borde);

  border-radius: 13px;

  background: white;

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.perfil-dato span {
  color: var(--texto-muy-suave);

  font-size: 11px;
}


.bloque-resumen {
  padding:
    17px;

  border:
    1px solid var(--borde);

  border-radius: 14px;

  background:
    #f5f2eb;
}


.bloque-resumen > span {
  color: #9b8d74;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.5px;
}


.bloque-resumen p {
  margin:
    8px 0 0;

  line-height: 1.55;
}


/* =====================================================
   CONVERSACIÓN DEL DOCTOR
===================================================== */

.conversacion-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin:
    27px 0 12px;
}


.conversacion-header h3 {
  margin: 0;

  font-size: 20px;
}


.conversacion-header span {
  color: var(--texto-muy-suave);

  font-size: 12px;
}


.conversacion {
  height:
    min(
      420px,
      46vh
    );

  overflow-y: auto;

  padding:
    18px;

  border:
    1px solid var(--borde);

  border-radius: 17px;

  background:
    #f3f1ec;

  display: flex;

  flex-direction: column;

  gap: 13px;
}


.mensaje-historial {
  width: fit-content;

  max-width: 82%;

  padding:
    13px 15px;

  border-radius: 15px;

  line-height: 1.5;
}


.mensaje-historial p {
  margin:
    8px 0 0;
}


.paciente-historial {
  align-self: flex-end;

  background:
    linear-gradient(
      135deg,
      #171510,
      #2b261d
    );

  color: white;

  border-bottom-right-radius:
    4px;
}


.ia-historial {
  align-self: flex-start;

  background: white;

  color: #312d26;

  border:
    1px solid var(--borde);

  border-bottom-left-radius:
    4px;
}


.mensaje-meta {
  display: flex;

  justify-content: space-between;

  gap: 24px;

  font-size: 10px;
}


.mensaje-meta span {
  opacity: 0.65;
}


.sin-conversacion {
  margin: auto;

  color: var(--texto-muy-suave);
}


.modal-acciones {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  padding-top: 20px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (
  max-width: 950px
) {

  .chat-layout {
    width:
      min(
        620px,
        calc(100% - 28px)
      );

    grid-template-columns:
      1fr;

    gap: 25px;

    padding:
      25px 0;
  }


  .marca-panel {
    display: none;
  }


  .app {
    margin: auto;

    height:
      calc(100vh - 50px);

    max-height: 850px;
  }


  .resumen {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (
  max-width: 650px
) {

  .chat-layout {
    width: 100%;

    padding: 0;
  }


  .app {
    width: 100%;

    max-width: none;

    height:
      100dvh;

    min-height: 100dvh;

    max-height: none;

    border: none;

    border-radius: 0;

    box-shadow: none;
  }


  .header {
    min-height: 96px;

    padding:
      15px;
  }


  .avatar-bot {
    width: 53px;
    height: 53px;

    flex-basis: 53px;
  }


  .header h2 {
    font-size: 18px;
  }


  .nombre-superior {
    font-size: 8px;
  }


  .header p {
    font-size: 10px;
  }


  .boton-icono {
    width: 37px;
    height: 37px;
  }


  .chat {
    padding:
      18px 15px;
  }


  .mensaje {
    max-width: 88%;

    font-size: 14px;
  }


  .opciones-rapidas {
    grid-template-columns:
      1fr 1fr;
  }


  .opciones-rapidas button {
    min-height: 70px;

    padding: 10px;
  }


  .opciones-rapidas small {
    display: none;
  }


  .input-area {
    padding:
      11px 12px 8px;
  }


  #botonEnviar {
    min-width: 82px;
  }


  .flecha-enviar {
    display: none;
  }


  .privacidad-chat {
    padding-bottom: 9px;
  }


  .panel-admin {
    width:
      calc(100% - 24px);

    padding:
      20px 0 50px;
  }


  .admin-header {
    align-items: flex-start;

    flex-direction: column;

    padding: 21px;
  }


  .admin-header h1 {
    font-size: 27px;
  }


  .resumen {
    grid-template-columns:
      1fr 1fr;

    gap: 10px;
  }


  .card {
    min-height: 135px;

    padding: 17px;
  }


  .card h2 {
    font-size: 31px;
  }


  .titulo-seccion {
    align-items: flex-start;

    flex-direction: column;
  }


  .titulo-seccion h2 {
    font-size: 24px;
  }


  .paciente-card {
    padding: 18px;
  }


  .datos-paciente {
    grid-template-columns:
      1fr;

    gap: 12px;
  }


  .estado {
    font-size: 10px;

    padding:
      7px 9px;
  }


  .perfil-grid {
    grid-template-columns:
      1fr;
  }


  .modal-contenido {
    width: 100%;

    padding:
      22px 16px;
  }


  .conversacion {
    height:
      48vh;
  }


  .mensaje-historial {
    max-width: 90%;
  }

}


@media (
  max-width: 390px
) {

  .header-acciones {
    gap: 5px;
  }


  .boton-icono {
    width: 34px;
    height: 34px;
  }


  .opciones-rapidas {
    grid-template-columns:
      1fr;
  }


  .opciones-rapidas button {
    min-height: 56px;
  }


  .resumen {
    grid-template-columns:
      1fr;
  }

}