/* Phine — carpeta de separadores de cartón prensado. Tema claro para oficina. */
:root{
  --tapa:#1f3a5f; --tapa-2:#16304f;
  --fondo:#eef2f6; --hoja:#ffffff;
  --tinta:#17222f; --tinta-2:#4a5868;
  --linea:#d3dbe4; --linea-2:#b7c3cf;
  --h-empresa:#5b6fa8; --h-calcom:#2f8f9d; --h-brevo:#b07d1f;
  --h-hubspot:#9a5a8c; --h-dominio:#7a6a55; --h-buzon:#4f5d75;
  --ok:#1f7a4a; --ok-fondo:#e6f4ec;
  --revisar:#8a5a00; --revisar-fondo:#fff3d6;
  --mal:#b3261e; --mal-fondo:#fde8e6;
  --hue:var(--tapa); --hue-tab:var(--hue);
  --sombra:0 1px 2px rgba(23,34,47,.06),0 4px 12px rgba(23,34,47,.06);
  --f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:6px;
  --facil:cubic-bezier(.16,1,.3,1);
}
/* Color de cada sección. Pestañas con texto blanco: cal.com y brevo se oscurecen para AA. */
[data-tipo="empresa"]{--hue:var(--h-empresa)}
[data-tipo="calcom"]{--hue:var(--h-calcom);--hue-tab:color-mix(in srgb,var(--h-calcom) 75%,black)}
[data-tipo="brevo"]{--hue:var(--h-brevo);--hue-tab:color-mix(in srgb,var(--h-brevo) 75%,black)}
[data-tipo="hubspot"]{--hue:var(--h-hubspot)}
[data-tipo="dominio"]{--hue:var(--h-dominio)}
[data-tipo="buzon"]{--hue:var(--h-buzon)}
[data-tipo]:not([data-tipo="calcom"]):not([data-tipo="brevo"]){--hue-tab:var(--hue)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--linea-2) var(--fondo);scrollbar-width:thin}
body{background:var(--fondo);color:var(--tinta);font:400 17px/1.55 var(--f);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;min-height:100vh;caret-color:var(--tapa);accent-color:var(--tapa)}
::selection{background:color-mix(in srgb,var(--hue) 22%,white);color:var(--tinta)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--fondo)}
::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:5px;border:2px solid var(--fondo)}
a{color:var(--tapa);text-underline-offset:3px}
a:hover{color:var(--tapa-2)}
h1,h2,h3{font-weight:700;line-height:1.2;color:var(--tinta);letter-spacing:-.015em;text-wrap:balance}
h1{font-size:34px;letter-spacing:-.02em}
h2{font-size:26px}
h3{font-size:20px;font-weight:650}
p{max-width:65ch}
b,strong{font-weight:650}
.oculto{display:none!important}
:focus-visible{outline:2px solid var(--tapa);outline-offset:2px}
.icono svg,.ico{width:1.1em;height:1.1em;vertical-align:-.18em;flex:none}

/* Cabecera */
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--tapa);color:#fff}
.cabecera .marca{font-size:20px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.01em}
.cabecera .marca span{color:#9ec3ee}
.cabecera nav{display:flex;align-items:center;gap:18px;font-size:15px}
.cabecera nav a{color:#fff}
.cabecera nav a:hover{color:#dbe7f5}
.cabecera nav .quien{color:#c9d6e6;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enlace-boton{background:none;border:0;color:#dbe7f5;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.enlace-boton:hover{color:#fff}
.cabecera :focus-visible{outline-color:#fff}

.contenedor{max-width:880px;margin:0 auto;padding:32px 16px 80px}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--radio);
  font:600 15px/1.2 var(--f);cursor:pointer;text-decoration:none;border:1px solid transparent;
  transition:background-color 90ms ease-out,border-color 90ms ease-out,color 90ms ease-out}
.boton-laton{background:var(--tapa);color:#fff;border-color:var(--tapa)}
.boton-laton:hover{background:var(--tapa-2);border-color:var(--tapa-2);color:#fff}
.boton-linea{background:var(--hoja);color:var(--tapa);border-color:var(--linea-2)}
.boton-linea:hover{background:#f3f6f9;border-color:var(--tapa);color:var(--tapa)}
.boton:active:not([disabled]){transform:translateY(1px)}
.boton[disabled]{opacity:.55;cursor:not-allowed}
#comprobar[disabled],.boton[aria-busy="true"]{cursor:progress}

/* Formularios */
.campo{margin-bottom:18px}
.campo label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.campo .ayuda,.ayuda{display:block;font-size:13px;color:var(--tinta-2);margin-top:5px}
input,textarea,select{width:100%;background:var(--hoja);color:var(--tinta);border:1px solid var(--linea-2);border-radius:var(--radio);
  padding:12px 14px;font:inherit;font-size:16px;transition:border-color 90ms ease-out,box-shadow 90ms ease-out}
textarea{min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:#6b7785}
input:focus,textarea:focus,select:focus{border-color:var(--tapa);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--tapa) 18%,transparent)}
.campo.con-error input,.campo.con-error textarea,.campo.con-error select{border-color:var(--mal)}
.error-campo{display:block;color:var(--mal);font-size:13px;margin-top:5px}
.campo.casilla label{display:flex;gap:10px;align-items:flex-start;font-weight:500;cursor:pointer}
.campo.casilla input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--tapa);box-shadow:none}

/* Hoja base */
.tarjeta{background:var(--hoja);border:1px solid var(--linea);border-radius:10px;padding:28px;box-shadow:var(--sombra)}

/* Portada */
.portada{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;max-width:1040px;margin:0 auto;padding:64px 16px}
.portada .lema{color:var(--tinta-2);font-size:20px;line-height:1.45;margin-top:16px}
.portada ul{list-style:none;margin-top:28px;display:grid;gap:14px}
.portada li{padding-left:24px;position:relative;color:var(--tinta)}
.portada li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:2px;background:var(--h-calcom)}
.portada li:nth-child(3n+2)::before{background:var(--h-brevo)}
.portada li:nth-child(3n)::before{background:var(--h-hubspot)}
.portada .tarjeta{border-top-left-radius:0;border-top:4px solid var(--tapa);border-radius:0 0 10px 10px;position:relative;margin-top:42px}
.pestanas{display:flex;gap:4px;position:absolute;left:-1px;bottom:100%;margin-bottom:-3px}
.pestanas button{background:#e3e9f0;border:1px solid var(--linea);border-bottom:0;border-radius:8px 8px 0 0;color:var(--tinta-2);
  font:600 15px var(--f);padding:9px 18px;min-height:40px;cursor:pointer;transition:background-color 90ms ease-out}
.pestanas button:hover{background:#d8e0ea}
.pestanas button[aria-selected="true"]{background:var(--hoja);color:var(--tinta);border-color:var(--linea);
  border-top:4px solid var(--tapa);position:relative;z-index:1;padding-bottom:12px}
.mensaje-form{margin-bottom:16px;padding:10px 14px;font-size:15px}

/* Hoja de errata / avisos de resultado */
.mensaje-form.mal,.resultado.error{background:var(--mal-fondo);color:var(--tinta);border:1px solid color-mix(in srgb,var(--mal) 35%,white);
  border-top:2px dashed var(--mal);border-radius:4px}
.resultado{margin-top:20px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--linea);border-radius:4px}
.resultado .icono{font-size:20px;line-height:1.2;font-weight:700;flex:none}
.resultado.error .icono{color:var(--mal)}
.resultado.ok{background:var(--ok-fondo);border-color:color-mix(in srgb,var(--ok) 35%,white);border-top:2px solid var(--ok)}
.resultado.ok .icono{color:var(--ok)}
.resultado.revisar{background:var(--revisar-fondo);border-color:color-mix(in srgb,var(--revisar) 35%,white);border-top:2px solid var(--revisar)}
.resultado.revisar .icono{color:var(--revisar)}
.resultado .fecha{display:block;font-size:13px;color:var(--tinta-2);margin-top:2px}
.aviso{margin-top:12px;padding:12px 14px;border-radius:4px;background:var(--revisar-fondo);
  border:1px solid color-mix(in srgb,var(--revisar) 35%,white);color:var(--tinta);font-size:15px}
.aviso .ico{color:var(--revisar)}
.nota{font-size:15px;color:var(--tinta-2);margin-top:12px}

/* Raíl de separadores del alta */
.progreso{margin:0;display:flex;flex-direction:column}
.progreso .cuenta{order:-1;margin:0 0 10px;font-size:15px;color:var(--tinta-2)}
.progreso ol{list-style:none;display:flex;align-items:flex-end;gap:4px;padding-left:0}
.progreso li{--alto:0px;position:relative;flex:0 1 auto;min-width:0}
.progreso li:nth-child(1){--alto:15px} .progreso li:nth-child(2){--alto:12px} .progreso li:nth-child(3){--alto:9px}
.progreso li:nth-child(4){--alto:6px} .progreso li:nth-child(5){--alto:3px}
.progreso li button{display:flex;align-items:center;gap:6px;width:100%;cursor:pointer;text-align:left;
  padding:calc(8px + var(--alto)) 14px 9px;font:600 15px/1.2 var(--f);color:var(--tinta-2);
  background:color-mix(in srgb,var(--hue) 14%,white);border:1px solid color-mix(in srgb,var(--hue) 40%,white);
  border-top:3px solid var(--hue);border-bottom:0;border-radius:8px 8px 0 0;
  transition:background-color 90ms ease-out,transform 90ms ease-out}
.progreso li:not(.actual) button:hover{background:color-mix(in srgb,var(--hue) 24%,white);color:var(--tinta)}
.progreso li.actual{z-index:2;margin-bottom:-4px}
.progreso li.actual button{background:var(--hoja);color:var(--tinta);font-weight:700;padding-bottom:13px}
.progreso li .num{min-width:22px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.progreso li .texto{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progreso li .marca{display:inline-flex;color:var(--tinta-2)}
.progreso li.hecho .marca{color:var(--ok)}
.progreso li.revisar .marca{color:var(--revisar)}
.progreso li.error .marca{color:var(--mal)}

/* Hoja del paso */
.paso{position:relative;border-top:4px solid var(--hue);border-radius:0 0 10px 10px}
.paso.cambia{animation:hoja 90ms var(--facil)}
@keyframes hoja{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.paso h2{margin-bottom:4px}
.cab-hoja{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sello-hoja{border:1.5px solid var(--ok);background:none}
.bloques{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.bloque{border-top:1px solid var(--linea);padding-top:12px}
.bloque h3{font-size:17px;font-weight:700;color:var(--tinta);margin-bottom:4px}
.bloque p{color:var(--tinta-2);font-size:15px}
.como{background:color-mix(in srgb,var(--hue) 6%,white);border:1px solid color-mix(in srgb,var(--hue) 25%,white);
  border-radius:8px;padding:20px 22px;margin:8px 0 24px}
.como .enlaces{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.como ol{padding-left:22px;display:grid;gap:8px;color:var(--tinta)}
.como ol li::marker{color:var(--hue);font-weight:700}
.como .nota{margin-top:14px}
.acciones-paso{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px;position:sticky;bottom:0;z-index:3;background:var(--hoja);padding:12px 0;border-top:1px solid var(--linea)}

/* Registros DNS */
.registros{display:grid;gap:10px;margin-top:16px}
.registro{background:var(--hoja);border:1px solid var(--linea);border-radius:8px;padding:12px 14px}
.registro .cab{display:flex;gap:8px;align-items:center;font-weight:700}
.registro .cab .icono.ok{color:var(--ok)}
.registro .cab .icono.revisar{color:var(--revisar)}
.registro .cab .icono.falta{color:var(--mal)}
.registro p{font-size:15px;color:var(--tinta-2);margin-top:4px}
.registro code{display:block;margin-top:6px;font:13px/1.45 ui-monospace,Consolas,monospace;color:var(--tinta);background:#f3f6f9;
  border:1px solid var(--linea);border-radius:4px;padding:8px 10px;overflow-wrap:anywhere}

.navegacion{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--linea)}

/* Panel */
.contenedor > h1{margin-bottom:4px}
.estandarte{display:flex;gap:16px;align-items:center;padding:20px 24px;border-radius:10px;margin:24px 0 8px;border:1px solid}
.estandarte.listo{background:var(--ok-fondo);border-color:color-mix(in srgb,var(--ok) 35%,white)}
.estandarte.listo strong .ico,.estandarte.listo strong svg{color:var(--ok)}
.estandarte.falta{background:var(--revisar-fondo);border-color:color-mix(in srgb,var(--revisar) 35%,white)}
.estandarte.falta strong .ico,.estandarte.falta strong svg{color:var(--revisar)}
.estandarte strong{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin-bottom:2px}
.estandarte span{color:var(--tinta-2)}
.estandarte .boton{margin-left:auto;flex-shrink:0}
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 20px;margin-top:52px}
.rejilla:empty::before,#paso:empty::before{color:var(--tinta-2)}
.rejilla:empty::before{content:"Cargando tus conexiones…"}
#paso:empty::before{content:"Cargando…"}
.conexion{position:relative;display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--hue);border-radius:0 0 10px 10px}
.conexion .pestana{position:absolute;top:-28px;left:-1px;height:24px;padding:0 12px;
  background:var(--hue-tab);color:#fff;font-size:13px;font-weight:600;line-height:24px;border-radius:6px 6px 0 0;white-space:nowrap}
.conexion .arriba{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.conexion h3{font-size:20px}
.sello{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:9.5em;font-size:13px;font-weight:600;
  padding:3px 10px;border-radius:4px;white-space:nowrap;color:var(--tinta-2);background:var(--fondo)}
.sello.ok{color:var(--ok);background:var(--ok-fondo)}
.sello.error,.sello.falta{color:var(--mal);background:var(--mal-fondo)}
.sello.revisar{color:var(--revisar);background:var(--revisar-fondo)}
.conexion .detalle{color:var(--tinta-2);font-size:15px;flex:1}
.conexion .detalle.con-aviso{color:var(--revisar);flex:none;display:flex;gap:6px;align-items:flex-start}
.conexion .detalle.con-aviso .ico{margin-top:.2em;vertical-align:0}
.conexion .fecha{font-size:13px;color:var(--tinta-2)}
.conexion .boton{align-self:flex-start;min-height:40px;padding:8px 16px}

@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:26px}
  .portada{grid-template-columns:1fr;gap:28px;padding:32px 16px}
  .bloques,.rejilla{grid-template-columns:1fr}
  .rejilla{gap:36px}
  .tarjeta{padding:20px 16px}
  .cabecera{padding:12px 16px}
  .cabecera nav .quien{display:none}
  .progreso ol{gap:3px}
  .progreso li{flex:1}
  .progreso li button{justify-content:center;padding-left:4px;padding-right:4px;gap:3px}
  .progreso li .texto,.progreso li button .texto{display:none}
  .estandarte{flex-direction:column;align-items:flex-start}
  .estandarte .boton{margin-left:0}
  .navegacion{flex-wrap:wrap}
  .navegacion .boton{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pie: enlaces legales y aviso de IA (AI Act art. 50) */
.pie{max-width:1040px;margin:0 auto;padding:24px 16px 40px;border-top:1px solid var(--linea);font-size:13px;color:var(--tinta-2)}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:6px}
.pie a{color:var(--tinta-2)}
.pie a:hover{color:var(--tapa)}

/* Mi cuenta y administración */
.seccion-cuenta{margin-top:24px}
.seccion-cuenta h2{margin:0 0 12px;font-size:20px}
.seccion-cuenta .mensaje-form:empty{display:none}
.seccion-cuenta.peligro h2{color:var(--mal)}
.boton-peligro{background:var(--hoja);color:var(--mal);border-color:var(--mal)}
.boton-peligro:hover{background:var(--mal);color:#fff}
.tabla-admin{width:100%;border-collapse:collapse;background:var(--hoja);font-size:15px;font-variant-numeric:tabular-nums}
.tabla-admin th,.tabla-admin td{border-bottom:1px solid var(--linea);padding:12px;text-align:left;vertical-align:middle}
.tabla-admin th{font-size:13px;color:var(--tinta-2);font-weight:650}