/* Conecta y Crece Salud — estilos del directorio médico */

:root {
  --primario: #0d7a6f;
  --primario-oscuro: #085e55;
  --primario-suave: #e0f2ef;
  --ambar: #f59e0b;
  --ambar-suave: #fef3c7;
  --tinta: #16302c;
  --tinta-suave: #5b6f6b;
  --fondo: #f4f8f7;
  --blanco: #ffffff;
  --borde: #dbe7e4;
  --peligro: #b91c1c;
  --exito: #15803d;
  --radio: 16px;
  --sombra: 0 2px 10px rgba(13, 62, 56, .08);
  --sombra-alta: 0 8px 28px rgba(13, 62, 56, .14);
}

* { box-sizing: border-box; }

/* Respetar el atributo hidden aunque el elemento tenga display propio */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.55;
}

img { max-width: 100%; }

a { color: var(--primario); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- Cabecera ---------- */

.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); min-width: 0; }
.marca img { flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-texto strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-texto strong em { font-style: normal; color: var(--primario); }
.marca-texto small { color: var(--tinta-suave); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

.navegacion { display: flex; align-items: center; gap: 8px; }
.navegacion > a:not(.boton) { color: var(--tinta-suave); text-decoration: none; font-size: .95rem; padding: 6px 8px; }
.navegacion > a:not(.boton):hover { color: var(--primario); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.boton:active { transform: scale(.98); }

.boton-primario { background: var(--primario); color: var(--blanco); }
.boton-primario:hover { background: var(--primario-oscuro); }

.boton-contorno { background: transparent; color: var(--primario); border: 2px solid var(--primario); padding: 8px 16px; }
.boton-contorno:hover { background: var(--primario-suave); }

.boton-claro { background: var(--primario-suave); color: var(--primario-oscuro); }
.boton-claro:hover { background: #cde8e3; }

.boton-wa { background: #1fa855; color: var(--blanco); }
.boton-wa:hover { background: #178a45; }

.boton-grande { padding: 14px 26px; font-size: 1.05rem; width: 100%; }

/* ---------- Héroe y buscador ---------- */

.heroe {
  background: linear-gradient(150deg, var(--primario) 0%, var(--primario-oscuro) 75%);
  color: var(--blanco);
  padding: 44px 0 0;
  text-align: center;
}

.heroe h1 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); margin-bottom: .3em; }
.heroe h1 span { color: #8ee6da; }
.heroe-sub { max-width: 560px; margin: 0 auto 26px; opacity: .92; font-size: 1.02rem; }

.buscador {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 14px;
  max-width: 760px;
  margin: 22px auto -52px;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  text-align: left;
}

.buscador-texto {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--tinta-suave);
}
.buscador-texto input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 0;
  font-size: 1rem;
  color: var(--tinta);
  outline: none;
  min-width: 0;
}

.buscador-filtros { display: grid; grid-template-columns: 1fr; gap: 10px; }

.buscador select,
.formulario select {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
  padding: 12px;
  font-size: 16px; /* 16px evita el auto-zoom de iOS Safari al enfocar */
  color: var(--tinta);
}

@media (min-width: 640px) {
  .buscador-filtros { grid-template-columns: 1fr 1fr auto; }
}

/* ---------- Secciones ---------- */

.seccion { padding: 34px 16px 40px; }
.heroe + .seccion { padding-top: 76px; } /* espacio para el buscador que sobresale */
main.seccion { min-height: 40vh; }
.seccion-angosta { max-width: 680px; }

.fila-resultados { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fila-resultados h2 { font-size: 1.25rem; margin: 0; }
.conteo { color: var(--tinta-suave); margin: 0; font-size: .92rem; }
.enlace-limpiar { font-size: .92rem; }

/* ---------- Rejilla de tarjetas ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.tarjeta-destacada { border: 2px solid var(--ambar); }

.insignia-destacado {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ambar-suave);
  color: #92600a;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.insignia-fija { position: static; margin-bottom: 8px; }

.tarjeta-enlace { text-decoration: none; color: inherit; flex: 1; }
.tarjeta-cuerpo { display: flex; gap: 14px; padding: 18px 16px 10px; align-items: flex-start; }

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 3px solid var(--primario-suave);
  background: var(--primario-suave);
}
.avatar-iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--primario-oscuro);
}
.avatar-grande { width: 120px; height: 120px; font-size: 2.2rem; }

.tarjeta-datos { min-width: 0; }
.tarjeta-datos h3 { font-size: 1.05rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.tarjeta-destacada .tarjeta-datos h3 { padding-right: 92px; }

.chip-especialidad {
  display: inline-block;
  background: var(--primario-suave);
  color: var(--primario-oscuro);
  font-size: .8rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 6px;
}

.tarjeta-lugar { display: flex; align-items: center; gap: 5px; color: var(--tinta-suave); font-size: .88rem; margin: 0; }

.tarjeta-acciones {
  display: flex;
  gap: 8px;
  padding: 10px 16px 16px;
  flex-wrap: wrap;
}

.boton-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--primario-oscuro);
  background: var(--primario-suave);
  border-radius: 999px;
  padding: 8px 13px;
  transition: background .12s ease;
}
.boton-accion:hover { background: #cde8e3; }
.boton-accion.boton-wa { background: #e7f8ee; color: #14713a; }
.boton-accion.boton-wa:hover { background: #d2f2e0; }

/* ---------- Vacío ---------- */

.vacio {
  background: var(--blanco);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 34px 20px;
  text-align: center;
  color: var(--tinta-suave);
}

/* ---------- Franja para médicos ---------- */

.franja-medicos {
  background: linear-gradient(150deg, var(--primario) 0%, var(--primario-oscuro) 85%);
  color: var(--blanco);
  padding: 34px 0;
  margin-top: 26px;
}
.franja-fila { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.franja-fila h2 { margin-bottom: .2em; }
.franja-fila p { margin: 0; opacity: .92; max-width: 560px; }

/* ---------- Perfil ---------- */

.miga { font-size: .88rem; color: var(--tinta-suave); margin-bottom: 16px; }
.miga a { text-decoration: none; }

.perfil {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px 20px;
}
.perfil-destacado { border: 2px solid var(--ambar); }

.perfil-cabecera { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.perfil-cabecera h1 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); margin-bottom: 6px; }
.perfil-lugar, .perfil-cedula { display: flex; align-items: center; gap: 6px; color: var(--tinta-suave); margin: 4px 0 0; font-size: .95rem; }

.perfil-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.perfil-acciones .boton { flex: 1 1 auto; }

.perfil-detalles { display: grid; gap: 18px; border-top: 1px solid var(--borde); padding-top: 18px; }
.perfil-detalles h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; color: var(--primario-oscuro); }
.perfil-detalles p { margin: 0; }

.texto-multilinea { white-space: pre-line; overflow-wrap: anywhere; }
.perfil-cabecera h1, .perfil-detalles p, .chip-especialidad { overflow-wrap: anywhere; }

.volver { margin-top: 18px; }
.volver a { text-decoration: none; font-weight: 600; }

/* ---------- Formularios ---------- */

.formulario { display: grid; gap: 14px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 18px; box-shadow: var(--sombra); }
.formulario label { display: grid; gap: 6px; font-weight: 600; font-size: .93rem; }
.formulario input[type="text"],
.formulario input[type="tel"],
.formulario input[type="url"],
.formulario input[type="search"],
.formulario input[type="password"],
.formulario textarea {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--tinta);
  background: var(--fondo);
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus { outline: 2px solid var(--primario); outline-offset: 1px; background: var(--blanco); }
.formulario input[type="file"] { font-size: .9rem; }

.fila-2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .fila-2 { grid-template-columns: 1fr 1fr; } }

.intro { color: var(--tinta-suave); margin-top: 0; }
.nota { color: var(--tinta-suave); font-size: .85rem; margin: 0; }

.oculto-hp { position: absolute; left: -9999px; top: -9999px; }

.aviso { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.aviso p { margin: .5em 0; }
.aviso-exito { background: #e8f7ee; border: 1px solid #b5e3c8; color: #14532d; }
.aviso-error { background: #fdecec; border: 1px solid #f5c2c2; color: var(--peligro); }
.aviso-info { background: #eef6fd; border: 1px solid #c3ddf2; color: #0c4a6e; }
.aviso-exito h1 { color: var(--exito); }

/* ---------- Pie ---------- */

.pie { background: var(--tinta); color: #c7d6d3; margin-top: 40px; }
.pie a { color: #8ee6da; text-decoration: none; }
.pie-fila { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 16px 10px; }
.pie-marca { margin: 0 0 4px; color: var(--blanco); }
.pie-fila p { margin: 0; font-size: .92rem; }
.pie-enlaces { display: grid; gap: 6px; font-size: .92rem; }
.pie-legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; padding-bottom: 18px; margin-top: 16px; }
.pie-legal p { font-size: .8rem; opacity: .75; margin: 0; }

/* ---------- Panel de administración ---------- */

.cuerpo-admin { background: #eef3f2; }
.cabecera-admin { border-bottom: 3px solid var(--primario); }
.cuerpo-admin .seccion { padding-top: 26px; }

.caja-login { max-width: 400px; margin: 8vh auto 0; }
.caja-login h1 { font-size: 1.4rem; }

.tarjetas-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dato { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; text-align: center; box-shadow: var(--sombra); }
.dato strong { display: block; font-size: 1.9rem; color: var(--primario-oscuro); }
.dato span { color: var(--tinta-suave); font-size: .85rem; }
.dato-pendiente strong { color: #b45309; }
.dato-destacado strong { color: var(--ambar); }

.bloque-admin { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 20px; box-shadow: var(--sombra); }
.bloque-admin > h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

.globo { background: #b45309; color: var(--blanco); border-radius: 999px; font-size: .78rem; padding: 2px 9px; }

.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; color: var(--tinta-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 2px solid var(--borde); }
.tabla td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }

.celda-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.forma-inline { display: inline; }

.boton-mini {
  display: inline-block;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--tinta);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.boton-mini:hover { background: var(--primario-suave); border-color: var(--primario); }
.boton-exito { background: #e8f7ee; border-color: #b5e3c8; color: #14532d; }
.boton-peligro { background: #fdecec; border-color: #f5c2c2; color: var(--peligro); }
.boton-ambar { background: var(--ambar-suave); border-color: #f3d38a; color: #92600a; }

.etiqueta { display: inline-block; background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px; font-size: .76rem; padding: 2px 10px; color: var(--tinta-suave); }
.etiqueta-destacado { background: var(--ambar-suave); border-color: #f3d38a; color: #92600a; font-weight: 700; }
.etiqueta-demo { background: #eef6fd; border-color: #c3ddf2; color: #0c4a6e; margin-left: 6px; }

.fila-ajustes { display: grid; gap: 16px; }
@media (min-width: 760px) { .fila-ajustes { grid-template-columns: 1fr 1fr; } }
.formulario-ajuste { box-shadow: none; }

.foto-actual { display: flex; align-items: center; gap: 12px; }
.foto-actual img { border-radius: 50%; object-fit: cover; }
.casilla { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; }
.fila-casillas { display: grid; gap: 10px; }
.fila-botones { display: flex; gap: 10px; align-items: center; }
.fila-botones .boton-grande { width: auto; }

/* ---------- Tablas apiladas en móvil ---------- */

@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: 12px; margin-bottom: 10px; padding: 6px 2px; }
  .tabla td { border: 0; padding: 6px 12px; }
  .tabla td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
}