/* ============================================================
   ESTILOS DEL SISTEMA DE CONTRATOS · INCANORT
   Marca: azul marino #173559 + dorado #FFD200 (acento) + blanco.
   Estilo corporativo, elegante y formal.
   ============================================================ */

:root{
  --azul:        #173559;
  --azul-osc:    #102a45;
  --azul-claro:  #2f6da8;
  --oro:         #ffd200;
  --gris-fondo:  #eef2f6;
  --gris-borde:  #d7dee6;
  --gris-texto:  #5a6573;
  --texto:       #1c2733;
  --blanco:      #ffffff;
  --verde:       #1f9d55;
  --amarillo:    #b8860b;
  --rojo:        #c53030;
  --sombra:      0 2px 12px rgba(16,42,69,.08);
  --radio:       12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris-fondo); color:var(--texto); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Encabezado ---------- */
.barra{
  background:var(--azul); color:var(--blanco);
  padding:0 22px; border-bottom:3px solid var(--oro);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--sombra); min-height:64px; flex-wrap:wrap; gap:10px;
}
.barra .marca{ display:flex; align-items:center; gap:14px; padding:10px 0; }
.barra .marca img{ height:42px; width:auto; display:block; }
.barra .marca .div{ width:1px; height:30px; background:rgba(255,255,255,.25); }
.barra .marca .sub{ font-size:.82rem; opacity:.9; line-height:1.2; }
.barra nav{ display:flex; gap:6px; }
.barra nav a{
  color:#dbe6f1; text-decoration:none; font-size:.92rem; font-weight:600;
  padding:8px 14px; border-radius:8px;
}
.barra nav a:hover{ background:rgba(255,255,255,.10); color:#fff; }
.barra nav a.activo{ color:#fff; background:rgba(255,255,255,.12); }
.barra .usuario{ display:flex; align-items:center; gap:12px; font-size:.9rem; }
.barra .usuario .quien{ text-align:right; line-height:1.15; }
.barra .usuario .quien b{ font-weight:600; }
.barra .usuario .quien span{ font-size:.76rem; opacity:.8; display:block; }
.barra .usuario a.salir{ color:#dbe6f1; text-decoration:none; }
.barra .usuario a.salir:hover{ color:#fff; text-decoration:underline; }

/* Campanita de notificaciones (encabezado) */
.notif-wrap{ position:relative; }
.notif-btn{
  background:rgba(255,255,255,.12); border:none; color:var(--oro); cursor:pointer;
  width:36px; height:36px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.notif-btn:hover{ background:rgba(255,255,255,.2); }
.notif-btn.sonando{ animation:campanaSonar .5s ease-in-out 2; }
@keyframes campanaSonar{ 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-14deg);} 75%{ transform:rotate(14deg);} }
.notif-badge{
  position:absolute; top:-2px; right:-2px; background:var(--rojo); color:#fff;
  font-size:.7rem; font-weight:700; border-radius:10px; min-width:18px; height:18px;
  padding:0 4px; display:flex; align-items:center; justify-content:center; line-height:1;
  border:2px solid var(--azul);
}
.notif-drop{
  display:none; position:absolute; top:44px; right:0; width:320px; max-height:400px;
  overflow-y:auto; background:#fff; border:1px solid var(--gris-borde); border-radius:10px;
  box-shadow:0 8px 24px rgba(16,42,69,.18); z-index:50; color:var(--texto);
}
.notif-drop.abierto{ display:block; }
.notif-head{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-bottom:1px solid var(--gris-borde); font-size:.88rem;
}
.notif-head a{ color:var(--azul-claro); text-decoration:none; font-size:.78rem; }
.notif-head a:hover{ text-decoration:underline; }
.notif-vacio{ padding:18px 14px; color:var(--gris-texto); font-size:.85rem; text-align:center; }
.notif-item{ display:block; padding:10px 14px; border-bottom:1px solid #eef2f6; text-decoration:none; color:var(--texto); }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:#f4f7fa; }
.notif-item div{ font-size:.85rem; line-height:1.35; }
.notif-item span{ font-size:.72rem; color:var(--gris-texto); }
.notif-item.sin-leer{ background:#f0f6ff; }
.notif-item.sin-leer div{ font-weight:600; }

/* Avatar / iniciales */
.avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  background:var(--oro); color:var(--azul); font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.5);
}

/* ---------- Contenedor ---------- */
.contenedor{ max-width:1080px; margin:26px auto; padding:0 18px; }

/* ---------- Login / tarjetas centradas ---------- */
.centro{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:var(--azul);
}
.tarjeta{
  background:var(--blanco); border-radius:var(--radio);
  box-shadow:0 16px 48px rgba(0,0,0,.22); padding:34px 30px; width:100%; max-width:410px;
  border-top:4px solid var(--oro);
}
.tarjeta .logo{ text-align:center; margin-bottom:20px; }
.tarjeta .logo img{ height:62px; width:auto; }
.tarjeta h1{ margin:0 0 4px; font-size:1.35rem; color:var(--azul); text-align:center; }
.tarjeta .sub{ margin:0 0 20px; color:var(--gris-texto); font-size:.9rem; text-align:center; }

/* ---------- Formularios ---------- */
label{ display:block; font-size:.85rem; font-weight:600; color:var(--gris-texto); margin:14px 0 6px; }
input[type=text],input[type=password],input[type=email],input[type=tel],select{
  width:100%; padding:11px 12px; font-size:1rem; color:var(--texto);
  border:1px solid var(--gris-borde); border-radius:8px; background:#fbfcfe;
}
input:focus,select:focus{ outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(47,109,168,.16); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; font-size:.95rem; font-weight:600;
  border:none; border-radius:8px; cursor:pointer; text-decoration:none; transition:filter .15s;
}
.btn:hover{ filter:brightness(1.07); }
.btn-azul{ background:var(--azul); color:#fff; }
.btn-oro{ background:var(--oro); color:var(--azul); }
.btn-borde{ background:#fff; color:var(--azul); border:1px solid var(--gris-borde); }
.btn-ancho{ width:100%; }
.btn-chico{ padding:7px 13px; font-size:.85rem; }
.btn-wa{ background:#25D366; color:#fff; border:none; display:inline-flex; align-items:center; gap:6px; }
.btn-wa:hover{ filter:brightness(1.05); }

/* ---------- Mensajes ---------- */
.aviso{ padding:11px 14px; border-radius:8px; font-size:.9rem; margin:12px 0; }
.aviso-error{ background:#fdeaea; color:var(--rojo); border:1px solid #f5c2c2; }
.aviso-ok{ background:#e7f7ee; color:var(--verde); border:1px solid #bce6cd; }
.aviso-info{ background:#e9f2fb; color:var(--azul-claro); border:1px solid #c3ddf3; }

/* ---------- Cabecera de sección ---------- */
.seccion-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.seccion-top h2{ margin:0; color:var(--azul); font-size:1.3rem; }
.acciones{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Buscador / filtros ---------- */
.filtros{
  background:#fff; border:1px solid var(--gris-borde); border-radius:var(--radio);
  padding:12px 14px; margin-bottom:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
}
.filtros .campo{ display:flex; flex-direction:column; flex:1; min-width:140px; }
.filtros .campo label{ margin:0 0 5px; }
.filtros .botones{ display:flex; gap:8px; }

/* ---------- Tabla ---------- */
.tabla-wrap{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden; }
table{ width:100%; border-collapse:collapse; }
thead th{
  background:#f4f7fa; text-align:left; padding:12px 14px;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-texto);
  border-bottom:1px solid var(--gris-borde);
}
tbody td{ padding:13px 14px; border-bottom:1px solid #eef2f6; font-size:.92rem; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#f8fafc; }

/* ---------- Insignias ---------- */
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.74rem; font-weight:700; }
.badge-enviado{ background:#fff3d6; color:var(--amarillo); }
.badge-parcial{ background:#e3eefb; color:var(--azul-claro); }
.badge-firmado{ background:#dff5e7; color:var(--verde); }
.badge-anulado{ background:#ececec; color:#777; }

/* ---------- Vacío ---------- */
.vacio{ text-align:center; padding:50px 20px; color:var(--gris-texto); }
.vacio .grande{ font-size:2.4rem; margin-bottom:8px; }

/* ---------- Perfil ---------- */
.perfil-grid{ display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
/* Rejilla del detalle de contrato (ver.php): columna de datos más ancha para que el correo y los nombres largos no se corten. */
.datos-grid{ display:grid; grid-template-columns:440px 1fr; gap:20px; align-items:start; }
.panel-card{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:22px; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.tabla-datos{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:.92rem; }
.tabla-datos td{ padding:6px 0; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
.tabla-datos td:first-child{ width:108px; color:#5a6573; padding-right:14px; }
.panel-card h3{ margin:0 0 14px; color:var(--azul); font-size:1.05rem; }
.foto-perfil{ width:140px; height:140px; border-radius:50%; object-fit:cover; border:4px solid var(--gris-fondo); margin:0 auto 14px; display:block; background:var(--oro); }
.foto-perfil-ini{ width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--azul);color:#fff;font-size:3rem;font-weight:700;margin:0 auto 14px; }
.perfil-centro{ text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .perfil-grid{ grid-template-columns:1fr; }
  .datos-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .barra .marca .sub{ display:none; }
  thead{ display:none; }
  tbody td{ display:block; border:none; padding:5px 14px; }
  tbody tr{ display:block; border-bottom:1px solid var(--gris-borde); padding:10px 0; }
  tbody td::before{ content:attr(data-label); font-weight:700; color:var(--gris-texto); display:inline-block; width:120px; }
}