@import url('latofonts.css');

/* =========================
   BASE / RESETEO LIGERO
   ========================= */
body{
  -webkit-font-smoothing: antialiased;
  font: normal 15px Lato-Regular;
  background: radial-gradient(1200px 400px at 50% -200px, #1E5BFA 0, #0B3FAE 38%, #001A52 100%) fixed;
  background-color:#001A52;
}
.container{ padding:25px; margin:0 auto; }
h4{ border:0 solid #fff; border-bottom-width:1px; padding-bottom:10px; text-align:center; }
.form-control{ border-radius:10px; }
.wrapper{ text-align:center; }

/* =========================
   FORM LOGIN
   ========================= */
.form-login{
  background:#EDEDED;
  padding:10px 20px 20px;
  border-radius:15px;
  border:3px solid #d2d2d2;
  box-shadow:0 1px 0 #cfcfcf;
}

/* =========================
   TARJETAS LISTA (LEGADO)
   ========================= */
.cnt-t{
  position:relative;
  min-height:95px; /* antes height fija */
  margin-bottom:10px;
  border:1px solid #2755b3;
  border-radius:0;
  background:#5682dd;
}
/* clearfix */
.cnt-t::after{ content:""; display:table; clear:both; }

/* Íconos de estado (sprites/PNG) */
.logofiber-add,
.logofiber-remove,
.logofiber-soporte,
.logofiber-check,
.logofiber-cross{
  background-repeat:no-repeat;
  background-position-y:50%;
  background-size:70px;
  width:70px; height:85px;
  float:right;
}
.logofiber-add{    background-image:url("/img/ont-add.png"); }
.logofiber-remove{ background-image:url("/img/ont-remove.png"); }
.logofiber-soporte{background-image:url("/img/ont-soporte.png"); }
.logofiber-check{  background-image:url("/img/check.png");  margin-top:4px; }
.logofiber-cross{  background-image:url("/img/cross.png");  margin-top:4px; }

/* Contenido textual al lado del ícono */
.data{
  float:left;
  min-height:85px;
  width:calc(100% - 80px); /* 70px icono + respirito */
  box-sizing:border-box;
  text-align:left;
}
.data h1{
  color:#eaeaea; text-transform:uppercase;
  font-size:10px; margin:10px 0 2px;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
  font-weight: bold;
}
.data h2{
  color:#dcdcdc; text-transform:uppercase;
  font-size:10px; margin:0 0 2px;
  text-align:left;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
  font-weight: bold;
}

/* =========================
   FICHA INSTALACIÓN / SOPORTE
   ========================= */
.cnt-t-instalacion{
  position:relative;
  margin-bottom:10px;
  border-radius:15px;
  background:#fff;
}
.cnt-t-instalacion::after{ content:""; display:table; clear:both; }

/* Enlaces dentro de la ficha */
.cnt-t-instalacion a,
.cnt-t-instalacion a:visited{
  color:#000; text-transform:uppercase; text-decoration:none;
}

/* Botón genérico de instalación (contenedor) */
.btn-instalacion{
  position:relative;
  margin-bottom:10px;
  border-radius:15px;
  background:#fff;
}
.btn-instalacion a{
  color:#fff; text-transform:uppercase; text-decoration:none;
}

/* Bloques de datos */
.data-inst,
.data-inst-t{
  float:left; width:100%; box-sizing:border-box;
}
.data-inst h1{
  color:#000; text-transform:uppercase; font-size:16px;
  margin:10px 0 2px; text-align:left;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
}
.data-inst h2{
  color:#000; text-transform:uppercase; font-size:14px;
  margin:0 0 2px; text-align:left;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
}
.map-gps-link{ color:#000; }
.mapa-inst img{
  display:block; max-width:100%; height:auto;
  margin:15px 0;
}

/* Títulos alternativos (tipografía bold) */
.data-inst-t h1{
  color:#000; text-transform:uppercase; font-size:16px;
  margin:10px 0 2px;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
}
.data-inst-t h2{
  color:#000; text-transform:uppercase; font-size:16px;
  margin:0; text-align:left;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
}
.data-inst-t h3{
  color:#000; text-transform:uppercase; font-size:10px;
  margin:0; text-align:left;
  white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
}
.data-inst-t h5{ color:#334155; font-size:15px; margin:0; text-align:left; }
/* .data-inst-t strong{ font-family:LatoWebBlack; } */
.mapa-inst-t img{
  display:block; max-width:100%; height:auto;
  margin:5px 0 15px;
}

/* =========================
   TARJETA “VER CREDENCIAL”
   ========================= */
.cnt-cred{
  display:flex; align-items:center; justify-content:center;
  min-height:95px; /* consistente con cnt-t */
  padding:20px;
}
.cnt-cred h1{ margin:0; }

/* =========================
   ENCABEZADOS DE PÁGINA
   ========================= */
.page-title{
  color:#fff; margin:12px 0 0;
  font-size:30px; font-weight:800; letter-spacing:.3px;
}
.page-sub{
  color:#dbeafe; margin:0 0 10px;
  font-size:22px; font-weight:600;
}

/* =========================
   TARJETAS (NUEVO DISEÑO)
   ========================= */
.task-card{
  position:relative;
  display:grid; grid-template-columns:54px 1fr; gap:14px; align-items:flex-start;
  margin:14px auto; padding:18px 18px 16px;
  background:#fff; border-radius:18px;
  box-shadow:0 10px 30px rgba(2,6,23,.15);
}

/* Insignia circular izquierda */
.task-card .left{ display:flex; align-items:flex-start; justify-content:center; }
.task-card .badge{
  --bd:#10b981;
  height:46px; width:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--bd);
  font-size:22px; color:var(--bd);
  background:#ecfeff;
}

/* Variantes de color para badge */
.badge-amber{ --bd:#f59e0b; background:#fff7ed; color:#f59e0b; }
.badge-slate{ --bd:#94a3b8; background:#f1f5f9; color:#64748b; }
.badge-red{   --bd:#ef4444; background:#fef2f2; color:#ef4444; }

/* Estado / subtítulo */
.task-content h6.status{
  margin:0; font-size:18px; font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
.status-done{ color:#16a34a; }
.status-active{ color:#f59e0b; }
.status-pending{ color:#64748b; }
.status-rejected{ color:#ef4444; }

/* Título */
.task-title{
  margin:.25rem 0 .35rem;
  font-size:24px; font-weight:800; color:#111827;
  line-height:1.25; word-break:break-word;
}

/* Detalles */
.details{ list-style:none; padding:0; margin:8px 0 0; }
.details li{
  display:flex; align-items:center; gap:10px;
  margin:6px 0; color:#334155; font-size:16px;
  word-break:break-word; white-space:normal;
}
.details i{ width:18px; text-align:center; }

/* Tarjeta bloqueada */
.locked .details{ display:none; }
.locked .task-text{
  color:#475569; font-size:15px; margin:10px 0 4px; line-height:1.35; word-break:break-word;
}

/* Enlaces tarjeta (habilitado / deshabilitado) */
a.card-link{ text-decoration:none; color:inherit; }
a.card-link.disabled{ pointer-events:none; cursor:default; }

/* Distinción por marca (pill) */
.brand-pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:800;
  background:#eef2ff; color:#3730a3; margin-left:6px;
}
.brand-solunet{ background:#eff6ff; color:#1d4ed8; }
.brand-neo{     background:#f5f3ff; color:#6d28d9; }

/* Logo marca (dentro de detalles) */
.brand-logo{
  display:block; height:60px; max-width:160px;
  border-radius:15px; padding:10px;
}

/* Mostrar solo Nº de cliente cuando está finalizado */
.task-card.finalizado .task-title,
.task-card.finalizado .task-text{ display:none!important; }
.task-card.finalizado .details li{ display:none!important; }
.task-card.finalizado .details li.solo-cliente{
  display:flex!important; font-weight:800; color:#0f172a;
}

/* =========================
   BOTÓN CREDENCIAL
   ========================= */
.cred-wrap{ margin:18px auto 36px; }
.btn-cred{
  display:block; width:100%; text-align:center;
  padding:16px 18px; border-radius:16px;
  background:linear-gradient(135deg, #1E5BFA, #005BFE 45%, #0046D5);
  color:#fff; font-weight:900; font-size:16px; letter-spacing:.3px;
  text-decoration:none; box-shadow:0 10px 25px rgba(0,70,213,.40);
}
.btn-cred:active{ transform:translateY(1px); }

/* =========================
   UTILIDADES / RESPONSIVE
   ========================= */
.mt-4{ margin-top:1rem; }

@media (max-width:480px){
  .logofiber-add,.logofiber-remove,.logofiber-soporte,.logofiber-check,.logofiber-cross{
    background-size:56px; width:56px; height:72px;
  }
  .data{ width:calc(100% - 64px); }
}


/* =========================
   BOTONES DE PASO (flujo instalación / soporte)
   Grandes y táctiles para uso en campo con una mano
   ========================= */
#btnpre, #continuar-a, #continuar-b, #continuar-c, #continuar-d,
#continuar-apr, #continuar-aprobacion{
  display:block; width:100%; float:none !important;
  box-sizing:border-box;
  padding:16px; margin:14px 0 6px;
  border:0; border-radius:14px;
  background:linear-gradient(135deg, #1E5BFA, #005BFE 45%, #0046D5);
  color:#fff !important; font-size:18px; font-weight:800;
  letter-spacing:.3px; text-transform:uppercase;
  box-shadow:0 6px 18px rgba(0,70,213,.35);
}
#btnpre:active, #continuar-a:active, #continuar-b:active, #continuar-c:active,
#continuar-d:active, #continuar-apr:active, #continuar-aprobacion:active{
  transform:translateY(1px);
}
#btnpre:disabled, #continuar-a:disabled, #continuar-b:disabled, #continuar-c:disabled,
#continuar-d:disabled, #continuar-apr:disabled, #continuar-aprobacion:disabled{
  opacity:.45; box-shadow:none;
}

/* Foco bien visible en inputs (sol de frente, guantes) */
input:focus, select:focus, textarea:focus{
  outline:3px solid #1E5BFA; outline-offset:1px;
}

/* Inputs más altos y con fuente 16px (evita el zoom automático de iOS) */
.data-inst-t input[type=text], .data-inst-t input[type=number], .data-inst-t select{
  min-height:46px !important; font-size:16px !important; border-radius:10px;
}


/* =========================
   FICHA DE TAREA: jerarquía de la info
   (instalación / soporte)
   ========================= */
h1.ficha-nombre, .data-inst h1.ficha-nombre{
  margin:14px 0 2px; text-align:center;
  font-size:22px; font-weight:800; color:#0f172a;
  text-transform:uppercase; line-height:1.25; overflow-wrap:anywhere;
}
.ficha-dir{
  margin:0 0 10px; text-align:center;
  font-size:16px; font-weight:700; color:#1E5BFA;
  text-transform:uppercase; line-height:1.35; overflow-wrap:anywhere;
}
ul.ficha-datos{
  list-style:none; margin:6px 0 12px; padding:12px 2px 2px;
  border-top:1px solid #e2e8f0; text-align:left;
}
ul.ficha-datos.sin-borde{ border-top:0; padding-top:2px; margin-top:2px; }
.ficha-datos li{
  display:flex; gap:10px; align-items:baseline;
  margin:8px 0; line-height:1.35;
}
.ficha-datos .lbl{
  flex:0 0 86px; font-size:11px; font-weight:800; letter-spacing:.6px;
  color:#64748b; text-transform:uppercase; padding-top:2px; text-align:left;
}
.ficha-datos .val{
  font-size:16px; color:#0f172a; font-weight:700;
  overflow-wrap:anywhere; text-align:left; text-transform:none;
}
h2.ficha-seccion, .data-inst-t h2.ficha-seccion{
  margin:14px 0 10px; padding-bottom:6px; text-align:left;
  font-size:13px; font-weight:800; letter-spacing:.8px;
  color:#64748b; text-transform:uppercase;
  border-bottom:1px solid #e2e8f0; border-left:0; border-radius:0;
}
.ficha-nota{
  margin:8px 0 4px; text-align:left;
  font-size:14px; color:#475569; line-height:1.45; text-transform:none;
}
.ficha-obs{
  margin:6px 0 14px; padding:10px 12px; text-align:left;
  background:#fff7ed; border:1px solid #fdba74; border-radius:10px;
  font-size:15px; color:#7c2d12; line-height:1.45; text-transform:none;
}
.ficha-obs .obs-lbl{
  display:block; font-size:11px; font-weight:800; letter-spacing:.6px;
  color:#9a3412; text-transform:uppercase; margin-bottom:3px;
}
h2.ficha-red, .data-inst-t h2.ficha-red{
  margin:12px 0 2px; text-align:left;
  font-size:14px; font-weight:800; letter-spacing:.5px; color:#1E5BFA;
}


/* =========================
   SUB-TARJETAS WI-FI
   Claves legibles para dictar al cliente (monoespaciada,
   distingue l/1 y O/0) y lenguaje sin jerga.
   ========================= */
.wifi-card{
  margin:10px 0 14px; padding:12px 14px 14px; text-align:left;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
}
.wifi-banda{
  margin:0 0 4px; text-align:left;
  font-size:14px; font-weight:800; color:#1E5BFA;
  text-transform:uppercase; letter-spacing:.4px;
}
.wifi-banda small{
  font-size:12px; font-weight:600; color:#64748b;
  text-transform:none; letter-spacing:0;
}
.ficha-datos .val.wifi-pass{
  font-family:"Courier New", Courier, monospace;
  font-size:20px; font-weight:700; letter-spacing:1.5px;
  background:#fff; border:1.5px dashed #94a3b8; border-radius:8px;
  padding:4px 10px; display:inline-block;
}
.wifi-card .btn-copy{
  margin-top:8px; width:100%; border:0;
  font-size:15px; padding:12px 14px; border-radius:12px;
}
.wifi-card .btn-copy:disabled{ opacity:.7; }


/* =========================
   FORMULARIOS Y PASOS (confirmar-)
   ========================= */
h5.form-lbl, .data-inst-t h5.form-lbl{
  margin:14px 0 4px; text-align:left;
  font-size:12px; font-weight:800; letter-spacing:.5px;
  color:#475569; text-transform:uppercase;
}
h1.paso-titulo, .data-inst-t h1.paso-titulo{
  margin:4px 0 12px; padding-bottom:6px; text-align:left;
  font-size:13px; font-weight:800; letter-spacing:.8px;
  color:#64748b; text-transform:uppercase;
  border-bottom:1px solid #e2e8f0; border-left:0; border-radius:0;
  line-height:1.45;
}
.senal-grid{ display:flex; gap:10px; margin:6px 0 12px; }
.senal-box{
  flex:1; padding:10px 12px; text-align:left;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
}
.senal-box .lbl{
  display:block; margin-bottom:2px;
  font-size:11px; font-weight:800; letter-spacing:.6px;
  color:#64748b; text-transform:uppercase;
}
.senal-box strong{
  display:block; font-size:22px; line-height:1.2;
  color:#0f172a; overflow-wrap:anywhere;
}


/* Subtítulo de página: nº de cliente bajo el título principal */
.page-cliente{
  margin:2px 0 14px;
  color:#BFD7FF; font-size:15px; font-weight:800;
  letter-spacing:.8px; text-transform:uppercase;
}


/* =========================
   SELECTOR DE FIBRA CON BOTONES (campo)
   ========================= */
.opciones-fibra{ display:flex; flex-direction:column; gap:8px; margin:4px 0 0; }
.opcion-fibra{
  display:block; width:100%; box-sizing:border-box;
  padding:14px 12px; border-radius:12px;
  border:2px solid #cbd5e1; background:#fff;
  color:#334155; font-size:16px; font-weight:700; text-align:center;
}
.opcion-fibra:active{ transform:translateY(1px); }
.opcion-fibra.sel{
  border-color:#005BFE; background:#E6F0FF; color:#0B3FAE;
}
.opcion-fibra.sel::before{ content:"✓ "; }

/* Aire entre el formulario y el botón Continuar */
#btnreg{ margin-top:22px; }


/* Señal aprobada: las cajas pasan a verde */
.senal-box.senal-ok{ border-color:#16a34a; background:#f0fdf4; }
.senal-box.senal-ok .lbl{ color:#15803d; }
.senal-box.senal-ok strong{ color:#14532d; }