/* Estilos del PROTOTIPO del portal del cliente (Overlord Eye).
   Se apoya en producto.css (variables de color, header, footer, .wrap).
   Aislado en su propio archivo para que el prototipo se borre de un tirón
   cuando el portal real exista en app.overlordcorp.com. */

.aviso-proto{
  background: var(--copper-wash);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  padding: 9px 24px;
  text-align: center;
}
.aviso-proto b{ color: var(--copper-ink); }
.aviso-proto code{ font-family: var(--f-etiqueta); font-size: 12px; }

main.wrap{ padding-top: 36px; padding-bottom: 56px; }
.portal-ancho{ max-width: 1040px; }

h1{ font-family: var(--f-titular); font-weight: 500; line-height: 1.15; margin: 0 0 10px; }
.lede{ color: var(--ink-soft); font-size: 17px; margin: 0 0 28px; }

/* --- login --- */
.login-wrap{ max-width: 520px; }
.tarjeta{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.tarjeta label{
  display: block;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px 0 6px;
}
.tarjeta label:first-child{ margin-top: 0; }
.tarjeta input{
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tarjeta input:focus{ outline: 2px solid var(--copper); outline-offset: 1px; }
.tarjeta button[type="submit"]{
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--copper-ink);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.tarjeta button[type="submit"]:hover{ background: var(--copper); }
.tarjeta .pie{ font-size: 14px; color: var(--ink-soft); margin: 16px 0 0; text-align: center; }

.boton-google{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.boton-google:hover{ border-color: var(--copper); }
.boton-google:disabled{ opacity: .6; cursor: default; }
.err{ color: #b3261e; font-size: 14px; margin: 12px 0 0; }
@media (prefers-color-scheme: dark){ .err{ color: #f2b8b5; } }

.nota-proto{
  font-size: 13.5px;
  color: var(--ink-faint);
  line-height: 1.6;
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
.nota-proto code{ font-family: var(--f-etiqueta); font-size: 12.5px; }

/* --- barra de identidad del portal --- */
.barra-cuenta{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 26px;
}
.barra-cuenta .quien{ font-size: 14px; color: var(--ink-soft); }
.barra-cuenta .quien b{ color: var(--ink); }
.barra-cuenta button{
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
.barra-cuenta button:hover{ color: var(--copper-ink); border-color: var(--copper); }

/* --- rejilla de módulos --- */
.modulos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.modulo{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modulo.apagado{ background: transparent; border-style: dashed; }
.modulo.apagado .nombre{ color: var(--ink-faint); }
.modulo .nombre{
  font-family: var(--f-titular);
  font-size: 21px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.punto{ width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.punto.vivo{ background: var(--teal); }
.punto.prueba{ background: var(--copper); }
.punto.off{ background: var(--line); }
.punto.alerta{ background: var(--copper-ink); }
.modulo p{ margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.modulo .secs{
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--f-etiqueta); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.modulo .secs span{
  border: 1px solid var(--line); border-radius: 5px;
  padding: 3px 7px; color: var(--ink-faint);
}
.modulo .acciones{ margin-top: auto; padding-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.boton{
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  padding: 9px 15px; border-radius: 8px;
  color: #fff; background: var(--copper-ink); border: 0;
}
.boton:hover{ background: var(--copper); color: #fff; }
.boton.sec{ background: none; color: var(--ink-soft); border: 1px solid var(--line); font-weight: 500; }
.boton.sec:hover{ color: var(--copper-ink); border-color: var(--copper); background: none; }

.estado-linea{
  font-size: 13px;
  font-family: var(--f-etiqueta);
  color: var(--ink-faint);
  background: var(--surface-2);
  border-radius: 7px;
  padding: 8px 10px;
  line-height: 1.5;
}
.estado-linea b{ color: var(--ink); font-weight: 600; }

/* --- panel de simulación (solo prototipo) --- */
.simulador{
  margin-top: 34px;
  border: 1px dashed var(--copper);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--copper-wash);
}
.simulador h2{ font-size: 15px; margin: 0 0 6px; letter-spacing: .02em; text-transform: uppercase; color: var(--copper-ink); }
.simulador p{ margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.simulador .fila{ display: flex; gap: 10px; flex-wrap: wrap; }

/* --- usuarios del negocio (§3: Membresia dueño/operador) --- */
.lista-usuarios{ list-style: none; margin: 0; padding: 0; }
.lista-usuarios li{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.lista-usuarios li:last-child{ border-bottom: 0; }
.lista-usuarios .rol{
  font-family: var(--f-etiqueta); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px;
}
.lista-usuarios .correo{ color: var(--ink-faint); font-size: 13px; margin-left: auto; }
.lista-usuarios .quitar{
  font: inherit; cursor: pointer; background: none; border: 0; color: var(--ink-faint);
  padding: 2px 4px; line-height: 1;
}
.lista-usuarios .quitar:hover{ color: var(--copper-ink); }

/* --- dashboard de servicio --- */
.tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 22px; flex-wrap: wrap; }
.tabs button{
  font: inherit; font-size: 14.5px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-soft); padding: 10px 14px; margin-bottom: -1px;
}
.tabs button[aria-selected="true"]{ color: var(--ink); border-bottom-color: var(--copper); font-weight: 600; }
.panel[hidden]{ display: none; }

.cifras{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.cifra{ background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cifra .n{ font-family: var(--f-titular); font-size: 28px; line-height: 1.1; }
.cifra .t{ font-size: 12.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

.feed{ list-style: none; margin: 0; padding: 0; }
.feed li{ border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 15px; display: flex; gap: 14px; }
.feed li:last-child{ border-bottom: 0; }
.feed .cuando{ font-family: var(--f-etiqueta); font-size: 12.5px; color: var(--ink-faint); flex: 0 0 92px; padding-top: 3px; }

table.datos{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.datos th{
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); font-weight: 600; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line);
}
table.datos td{ padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.pill{ font-size: 12.5px; border-radius: 20px; padding: 3px 10px; white-space: nowrap; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.pill.ok{ background: var(--teal-soft); color: var(--teal); border-color: transparent; }
.pill.alerta{ background: var(--copper-wash); color: var(--copper-ink); border-color: transparent; }

.doctor{ background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.doctor h3{ margin: 0 0 2px; font-family: var(--f-titular); font-size: 20px; font-weight: 500; }
.doctor .esp{ font-size: 13px; color: var(--ink-faint); margin: 0 0 12px; }
.cita{ display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.cita .h{ font-family: var(--f-etiqueta); font-size: 13px; color: var(--ink-faint); flex: 0 0 48px; }
.cita .m{ color: var(--ink-soft); font-size: 13.5px; }
.cita.libre{ color: var(--ink-faint); font-style: italic; }

.vacio{
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 32px 24px; text-align: center; color: var(--ink-soft);
}
.vacio b{ display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; font-family: var(--f-titular); font-weight: 500; }

footer{ margin-top: 0; }

/* --- banner de cobro (§5: past_due avisa sin alarmar, unpaid sí) --- */
.banner-cobro{
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
  background: var(--copper-wash); border: 1px solid var(--copper);
}
.banner-cobro p{ margin: 0; font-size: 14px; color: var(--copper-ink); }
.banner-cobro p b{ font-weight: 700; }
.banner-cobro.unpaid{ background: var(--copper-ink); border-color: var(--copper-ink); }
.banner-cobro.unpaid p{ color: #fff; }
.banner-cobro .boton{ flex: 0 0 auto; }
.banner-cobro.unpaid .boton{ background: #fff; color: var(--copper-ink); }
.banner-cobro.unpaid .boton:hover{ background: var(--copper-wash); }

/* --- centro de comando: dashboard de Clinic en escritorio --- */
/* Mobile-first: flujo normal apilado, con scroll de página completo. */
.cc-grid{ display: flex; flex-direction: column; gap: 18px; }
.cc-side{ display: flex; flex-direction: column; gap: 14px; }
.cc-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.cc-card h3{
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); font-family: var(--f-etiqueta);
}
.cc-hoy-lista{ list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.cc-hoy-lista li{ display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cc-hoy-lista li:last-child{ border-bottom: 0; }
.cc-hoy-lista .h{ font-family: var(--f-etiqueta); color: var(--ink-faint); flex: 0 0 42px; }
.cc-accesos{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-accesos a{ font-size: 14px; text-decoration: none; color: var(--ink); }
.cc-accesos a:hover{ color: var(--copper-ink); }
.cc-usuarios-mini{ list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.cc-usuarios-mini li{ padding: 4px 0; color: var(--ink-soft); }
.cc-usuarios-mini .rol{ color: var(--ink-faint); font-size: 12px; }

/* A partir de escritorio estándar, todo el tablero cabe en una pantalla:
   la página deja de scrollear y solo scrollean los paneles internos
   (tabla del CRM, agenda) — como cualquier tablero de control real. */
@media (min-width: 1024px){
  body.cc-body{ height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  body.cc-body header{ padding: 12px 0; flex: 0 0 auto; }
  body.cc-body .aviso-proto{ padding: 5px 24px; font-size: 11.5px; flex: 0 0 auto; }
  body.cc-body footer{ display: none; }
  body.cc-body h1{ display: none; }
  body.cc-body .nota-proto{ display: none; }
  body.cc-body main.wrap{
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding-top: 16px; padding-bottom: 16px;
    width: 100%; max-width: 1400px; margin: 0 auto;
  }
  body.cc-body .barra-cuenta{ flex: 0 0 auto; margin-bottom: 12px; padding-bottom: 10px; }
  body.cc-body #contenido{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.cc-body .banner-cobro{ flex: 0 0 auto; }

  body.cc-body .cc-grid{
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px;
    flex: 1; min-height: 0;
  }
  body.cc-body .cc-main{ display: flex; flex-direction: column; min-height: 0; }
  body.cc-body .cc-main .cifras{ flex: 0 0 auto; margin-bottom: 14px; }
  body.cc-body .cc-main .tabs{ flex: 0 0 auto; margin-bottom: 12px; }
  body.cc-body .panel-area{ flex: 1; min-height: 0; overflow-y: auto; }
  body.cc-body .cc-side{ min-height: 0; overflow-y: auto; padding-right: 2px; gap: 10px; }
  body.cc-body .cc-card{ padding: 11px 14px; }
  body.cc-body .cc-card h3{ margin-bottom: 6px; }
  body.cc-body .cc-hoy-lista li{ padding: 4px 0; }

  /* Compactar densidad para que quepa sin recortar en 1366x768. */
  body.cc-body .cifra{ padding: 10px 14px; }
  body.cc-body .cifra .n{ font-size: 23px; }
  body.cc-body .feed li{ padding: 8px 0; font-size: 14px; }
  body.cc-body table.datos td, body.cc-body table.datos th{ padding: 7px 10px 7px 0; }
  body.cc-body .doctor{ padding: 12px 16px; margin-bottom: 10px; }
  body.cc-body .cita{ padding: 6px 0; }
}