/* ============================================================
   Actualización de Datos Clientes — Aress
   Estilos propios (se cargan DESPUÉS de AdminLTE)
   ============================================================ */
:root{
  --aress-1:#0b3d91;
  --aress-2:#154c79;
  --aress-3:#1769d1;
  --aress-4:#00b4d8;
  --ink:#152238;
  --muted:#6b7a90;
  --line:#e4ebf4;
  --err:#d6336c;
}

html,body{height:auto;}
body.page-cliente{
  font-family:'Inter','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  min-height:100vh;
  padding:0 0 3rem;
  background:
    radial-gradient(1200px 700px at 8% -12%, rgba(0,180,216,.22), transparent 62%),
    radial-gradient(1000px 700px at 105% 108%, rgba(23,105,209,.24), transparent 60%),
    linear-gradient(165deg,#eef3f9 0%,#e4ebf5 100%);
}
body.page-cliente::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,61,145,.055) 1px, transparent 1px);
  background-size:22px 22px;
}
.wrap{position:relative;z-index:1;}

/* ---------------- Encabezado de marca ---------------- */
.hero{
  border-radius:22px 22px 0 0;
  padding:2.25rem 1.5rem 4.75rem;
  text-align:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--aress-1) 0%,var(--aress-2) 45%,var(--aress-4) 130%);
}
.hero::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:70px;
  background:#f4f7fb;border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

/* --- AQUÍ ESTÁ EL CAMBIO EN .hero-logo --- */
.hero-logo {
  background: transparent; /* Quita el fondo blanco */
  border-radius: 0;         /* Quita el borde redondeado */
  padding: 0;               /* Quita el relleno interno */
  box-shadow: none;         /* Quita la sombra */
  display: inline-block;
  margin-bottom: 1rem;
}

/* Cambiamos de 62px a 85px para pantallas normales / escritorio */
.hero-logo img {
  height: 85px; 
  width: auto;
  display: block;
}

.hero h1 { font-size: 1.6rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.hero p { margin: .4rem auto 0; font-size: .92rem; opacity: .88; max-width: 540px; }

.hero-chips {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; position: relative; z-index: 2;
}
.hero-chip {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: .28rem .8rem; font-size: .75rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .4rem;
}

@media (max-width: 575.98px) {
  .hero { padding: 1.6rem 1rem 4rem; border-radius: 0; }
  .hero h1 { font-size: 1.2rem; }
  
  /* Ajustamos a 65px para móviles para que conserve buena proporción */
  .hero-logo img {
    height: 65px; 
  }
}

/* ---------------- Tarjeta principal ---------------- */
.sheet{
  background:#fff;border-radius:0 0 22px 22px;
  margin-top:-3.25rem;position:relative;z-index:2;
  box-shadow:0 26px 70px rgba(15,40,90,.16),0 2px 8px rgba(15,40,90,.05);
  padding:1.75rem;
}
@media (max-width:575.98px){.sheet{padding:1.1rem;border-radius:0;}}

/* ---------------- Secciones ---------------- */
.fs{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:1.35rem;overflow:hidden;}
.fs-head{
  display:flex;align-items:center;gap:.7rem;
  padding:.9rem 1.15rem;background:linear-gradient(180deg,#f8fbfe,#f2f7fc);
  border-bottom:1px solid var(--line);
}
.fs-num{
  width:30px;height:30px;flex:0 0 30px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--aress-1),var(--aress-4));
  color:#fff;font-weight:700;font-size:.85rem;
  box-shadow:0 4px 12px rgba(11,61,145,.28);
}
.fs-title{font-size:.98rem;font-weight:700;margin:0;line-height:1.2;}
.fs-sub{font-size:.76rem;color:var(--muted);margin:0;}
.fs-body{padding:1.2rem 1.15rem .35rem;}

/* ---------------- Campos ---------------- */
.page-cliente label.lbl{
  font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em;
  color:var(--muted);margin-bottom:.35rem;display:block;
}
.page-cliente .req{color:var(--err);}
.page-cliente .form-group{margin-bottom:1rem;}

.page-cliente .form-control{
  height:46px;border:1px solid #dbe4f0;background:#f8fafd;border-radius:11px 0 0 11px;
  font-size:.92rem;color:var(--ink);box-shadow:none;transition:border-color .15s,background .15s;
}
.page-cliente textarea.form-control{height:auto;border-radius:11px;padding:.7rem .9rem;}
.page-cliente .form-control::placeholder{color:#a9b6c9;}
.page-cliente .input-group-text{
  background:#eef3fa;border:1px solid #dbe4f0;border-left:0;
  border-radius:0 11px 11px 0;color:var(--aress-3);min-width:46px;
  justify-content:center;font-size:.95rem;
}
.page-cliente .input-group:focus-within .form-control,
.page-cliente .input-group:focus-within .input-group-text{border-color:var(--aress-3);}
.page-cliente .input-group:focus-within .form-control{background:#fff;}
.page-cliente .input-group:focus-within{border-radius:11px;box-shadow:0 0 0 4px rgba(23,105,209,.13);}
.page-cliente .form-control[readonly],
.page-cliente .form-control:disabled{background:#eef1f6;color:#5d6b81;cursor:not-allowed;}

/* Select2 alineado al diseño */
.page-cliente .select2-container--default .select2-selection--single{
  height:46px;border:1px solid #dbe4f0;background:#f8fafd;border-radius:11px 0 0 11px;
  display:flex;align-items:center;
}
.page-cliente .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.3;color:var(--ink);font-size:.92rem;padding-left:.85rem;
}
.page-cliente .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#a9b6c9;}
.page-cliente .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:6px;}
.page-cliente .select2-container--default.select2-container--focus .select2-selection--single,
.page-cliente .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--aress-3);background:#fff;
}
.select2-dropdown{border-color:#dbe4f0;border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(15,40,90,.14);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--aress-3);}

/* mensajes de error */
.page-cliente .help-block.with-errors{
  color:var(--err) !important;font-size:.76rem;font-weight:500;margin-top:.3rem;
}
.page-cliente .help-block.with-errors:not(:empty){
  display:flex;align-items:flex-start;gap:.35rem;
}
.page-cliente .help-block.with-errors:not(:empty)::before{
  content:"\f06a";font-family:"Font Awesome 5 Free";font-weight:900;flex:0 0 auto;font-size:.72rem;line-height:1.35;
}
.page-cliente .has-danger .form-control,
.page-cliente .has-error .form-control{border-color:var(--err);}

/* ---------------- Autorizaciones ---------------- */
.consent{
  display:flex;gap:.75rem;align-items:flex-start;
  border:1px solid var(--line);background:#f9fbfe;border-radius:13px;
  padding:.85rem 1rem;margin-bottom:.7rem;transition:border-color .15s,background .15s;
}
.consent:hover{border-color:#c6d7ec;background:#f5f9ff;}
.consent .form-check-input{
  position:static;margin:.15rem 0 0;width:19px;height:19px;flex:0 0 19px;cursor:pointer;
}
.consent-text{font-size:.85rem;line-height:1.45;color:#3c4a63;}
.consent-text a{color:var(--aress-1);font-weight:600;text-decoration:underline;}
.consent-text a:hover{color:var(--aress-4);}
.consent-text .tag-oblig{
  display:inline-block;background:#fdecf2;color:var(--err);font-size:.66rem;font-weight:700;
  border-radius:5px;padding:.08rem .35rem;margin-left:.35rem;text-transform:uppercase;letter-spacing:.04em;
}
.consent-text .tag-opt{
  display:inline-block;background:#eef1f6;color:var(--muted);font-size:.66rem;font-weight:700;
  border-radius:5px;padding:.08rem .35rem;margin-left:.35rem;text-transform:uppercase;letter-spacing:.04em;
}

/* código de validación */
.code-box{
  border:1px dashed #b9cbe6;background:linear-gradient(180deg,#f7fbff,#f1f7fd);
  border-radius:14px;padding:1.1rem 1.15rem;margin-bottom:1.2rem;
}
.code-box .code-head{
  display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;
  color:var(--aress-1);margin-bottom:.2rem;
}
.code-box .code-sub{font-size:.78rem;color:var(--muted);margin-bottom:.8rem;}
#codigo{
  letter-spacing:.5em;text-align:center;font-weight:700;font-size:1.15rem;
  border-radius:11px 0 0 11px;
}

/* ---------------- Botonera ---------------- */
.actions{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line);padding-top:1.2rem;margin-top:.4rem;
}
.page-cliente .btn{border-radius:11px;font-weight:600;font-size:.9rem;}
.btn-aress{
  height:48px;padding:0 1.5rem;border:0;color:#fff;
  background:linear-gradient(135deg,var(--aress-1),var(--aress-3) 60%,var(--aress-4));
  background-size:190% 190%;box-shadow:0 10px 24px rgba(23,105,209,.32);
  transition:transform .15s,box-shadow .15s,background-position .4s;
}
.btn-aress:hover,.btn-aress:focus{
  color:#fff;transform:translateY(-2px);background-position:100% 0;
  box-shadow:0 14px 30px rgba(23,105,209,.42);
}
.btn-aress:active{transform:translateY(0);}
.btn-limpiar{
  height:48px;width:48px;padding:0;border:1px solid #dbe4f0;background:#fff;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-limpiar:hover{background:#f4f7fc;color:var(--aress-1);border-color:#c6d7ec;}

/* ---------------- Pie ---------------- */
.legal{
  text-align:center;font-size:.76rem;color:#7d8b9f;margin-top:1.4rem;line-height:1.6;
}
.legal i{color:#1c9d5f;}

/* Modales */
.modal-content{border:0;border-radius:16px;overflow:hidden;}
.modal-header{
  background:linear-gradient(135deg,var(--aress-1),var(--aress-3));color:#fff;border:0;padding:1rem 1.25rem;
}
.modal-header .close{color:#fff;opacity:.9;text-shadow:none;}
.modal-title{font-size:1rem;font-weight:700;}
.modal-body{font-size:.88rem;line-height:1.6;color:#3c4a63;max-height:65vh;overflow-y:auto;}

/* Fix: Select2 dentro de input-group (evita que el ícono salte de línea) */
.page-cliente .input-group > .select2-container{
  flex:1 1 auto !important;
  width:1% !important;
  max-width:100%;
  position:relative;
  z-index:1;
}
.page-cliente .input-group > .select2-container .select2-selection--single{
  width:100%;
  border-radius:11px 0 0 11px !important;
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    background-color: #0072b3;
    color: rgb(255, 255, 255);
    font-size: 100%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: -30%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}

[data-title] {
    position: relative;
}