/* ============================================================================
   SayProposals · modal "Cargar nuevo cliente"
   Estructura, orden y textos salen de maqueta-nuevo-cliente.html; los
   COMPONENTES son los de la casa (base.css / ui.css): campos, desplegables,
   botones y modal. Acá solo vive lo que la maqueta agrega y el kit no tenía:
   bloques, la grilla del par Inicio/Perfil, las filas de redes, el segmento,
   el calendario de un solo día, el check y el pie.
   Ningún control de este modal tiene radio de cápsula.
   ========================================================================== */

/* ---------- Cuerpo y bloques ---------- */
.mdl-nc .mdl-body{padding:0 26px;}

.nc-bloque{padding:20px 0 6px;border-bottom:1px solid var(--line);}
.nc-bloque:last-of-type{border-bottom:0;padding-bottom:20px;}
.nc-btit{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris2);margin-bottom:14px;}

.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.nc-full{grid-column:1 / -1;}

/* El asterisco de obligatorio, en el rojo de la casa. */
label .req{color:var(--rojo);margin-left:3px;}

/* Campo en falta tras validar. */
.nc-mal input,.nc-mal textarea,input.nc-mal,textarea.nc-mal{border-color:var(--rojo);background:#fff;}
.nc-mal .dd-btn,.nc-mal > .dd .dd-btn{border-color:var(--rojo);}

/* ---------- Par Inicio del servicio / Perfil del cliente ----------
   Las dos columnas se apoyan en la MISMA línea por estructura de grilla, no
   por margen: cuatro filas fijas (etiqueta, conmutador, campo, ayuda) y cada
   pieza puesta en la suya. La fila 2 la mide el segmento, que es lo único que
   la ocupa, así que el desplegable de Perfil arranca exactamente donde
   arranca el campo de fecha. El DOM va por columnas para que al apilarse en
   pantalla chica cada bloque quede junto. */
.nc-par{display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto;column-gap:18px;}
.nc-par > *{min-width:0;}
.nc-par .col-a{grid-column:1;}
.nc-par .col-b{grid-column:2;}
.nc-par .fila-et{grid-row:1;}
.nc-par .fila-seg{grid-row:2;}
.nc-par .fila-campo{grid-row:3;}
.nc-par .fila-ayuda{grid-row:4;}

/* ---------- Redes sociales ---------- */
.nc-redes{display:flex;flex-direction:column;gap:8px;}
.nc-red{display:flex;gap:8px;align-items:center;}
.nc-red .dd{width:168px;flex:none;}
.nc-red input{flex:1;min-width:0;}
.nc-quitar{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  background:none;border:0;border-radius:8px;color:var(--gris2);cursor:pointer;transition:background .16s,color .16s;}
.nc-quitar:hover{background:#f2f5f8;color:var(--navy);}
.nc-quitar .ico{width:15px;height:15px;}
.nc-quitar.oculto{visibility:hidden;}
.nc-agregar{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 0 0;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;}
.nc-agregar:hover{text-decoration:underline;}
.nc-agregar .ico{width:14px;height:14px;}

/* ---------- Segmento Fecha exacta / Referencia ----------
   Track gris chico, nunca dos cápsulas. Medidas fijadas por dirección. */
.nc-seg{display:inline-flex;background:#EEF2F7;border-radius:6px;padding:3px;margin-bottom:8px;}
.nc-seg button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--gris);
  background:none;border:0;border-radius:4px;padding:5px 12px;cursor:pointer;}
.nc-seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(15,25,45,.1);}

/* ---------- Calendario de un solo día ----------
   Mismo criterio que el mini calendario de la tabla (lunes primero, sin
   input date del sistema), pero con una sola fecha. Reusa las clases cal-* de
   tabla.css y solo agrega el día elegido y el de hoy. */
.nc-cal-menu{width:272px;padding:12px;}
.cal-d.sel{background:var(--navy);color:#fff;font-weight:800;}
.cal-d.hoy{box-shadow:inset 0 0 0 1.5px var(--celeste);}

/* ---------- Check de facturación ---------- */
.nc-check{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:4px 0;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--txt);cursor:pointer;text-align:left;}
.nc-check .caja{display:flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;
  border:1.5px solid #c3cdd9;border-radius:5px;background:#fff;color:#fff;}
.nc-check .caja .ico{width:11px;height:11px;opacity:0;}
.nc-check.on .caja{background:var(--navy);border-color:var(--navy);}
.nc-check.on .caja .ico{opacity:1;}

/* Campos de facturación apagados por el check. */
.nc-apagado{opacity:.5;}
.nc-apagado input,.nc-apagado .dd-btn{pointer-events:none;}

/* ---------- Pie ---------- */
.nc-pie{position:sticky;bottom:0;z-index:2;margin:0 -26px;padding:15px 26px;
  background:#fafbfd;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.nc-aviso{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--gris);
  font-weight:600;line-height:1.4;}
.nc-aviso b{color:var(--navy);font-weight:800;}
.nc-aviso .ico{width:15px;height:15px;flex:none;}
.nc-acciones{display:flex;gap:10px;margin-left:auto;flex:none;}
.nc-error{flex-basis:100%;font-size:12px;font-weight:700;color:var(--rojo);line-height:1.5;}
.nc-error:empty{display:none;}

@media(max-width:700px){
  .mdl-nc .mdl-body{padding:0 18px;}
  .nc-grid{grid-template-columns:1fr;}
  /* Apilado: el DOM ya viene por columnas, así que alcanza con soltar la
     colocación fija. Se repiten las clases para ganarle en especificidad. */
  .nc-par{grid-template-columns:1fr;grid-template-rows:auto;}
  .nc-par .col-a,.nc-par .col-b{grid-column:1;}
  .nc-par .fila-et,.nc-par .fila-seg,
  .nc-par .fila-campo,.nc-par .fila-ayuda{grid-row:auto;}
  .nc-pie{margin:0 -18px;padding:15px 18px;}
  .nc-acciones{margin-left:0;width:100%;}
  .nc-acciones .btn{flex:1;}
  .nc-red .dd{width:132px;}
}