/* PM GOR - Estilos centralizados (responsive + corporativo) */
:root{
  /* Base */
  --bg:#F3F5F7;
  --card:#fff;
  --text:#101828;
  --muted:#667085;
  --border:#D0D5DD;

  /* Paleta tipo Ecopetrol */
  --eco-green:#007A33;
  --eco-green-2:#00A651;
  --eco-yellow:#FFD100;

  /* Imágenes */
  --watermark-url: url("../img/watermark.png"); /* marca de agua + logo si lo usas */
  --watermark-opacity: 0.10;     /* recomendado 0.06 - 0.12 */
  --watermark-size: 78%;         /* tamaño dentro de la card */
  --watermark-position: 50% 25%; /* centrado sutil */
}

*{box-sizing:border-box}

body{
  font-family: Arial, sans-serif;
  background: var(--bg);
  margin:0;
  color: var(--text);
}

/* =========================
   LOGIN (layout responsive)
   ========================= */
body.login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 12px;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(0,122,51,.12), transparent 55%),
    radial-gradient(900px 500px at 95% 10%, rgba(255,209,0,.14), transparent 55%),
    var(--bg);
}

.login-wrap{
  width:min(820px, 100%);
  padding:0 12px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

.login-header,
.login-footer{ width:100%; }

/* Header centrado y corporativo */
.login-header{
  display:flex;
  justify-content:center;
  text-align:center;
  padding:10px 4px 2px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}

.brand-mark{
  width:90px;
  height:70px;
  border-radius:12px;

  /* Logo */
  background: var(--watermark-url) center / 90% no-repeat;

  /* Marco institucional */
  border: 1.5px solid rgba(0,122,51,.35);
  background-color:#ffffff;

  box-shadow:
    0 6px 18px rgba(16,24,40,.08),
    inset 0 0 0 1px rgba(255,209,0,.35);

  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}

.brand-mark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(255,209,0,.15), rgba(255,209,0,0) 60%);
  pointer-events:none;
}

.brand-text{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.brand-app{
  font-weight:900;
  letter-spacing:.3px;
  font-size:16px;
  color: var(--text);
  line-height:1.1;
}

.brand-sub{
  font-size:13px;
  color: var(--muted);
  margin-top:4px;
  line-height:1.25;
}

/* Footer centrado, sobrio */
.login-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color: var(--muted);
  padding:4px 6px;
}

/* =========================
   COMPONENTES BASE
   ========================= */
.card{
  max-width:460px;
  width:100%;
  margin:0 auto;
  background: var(--card);
  border-radius:16px;
  padding:18px 18px;
  border:1px solid rgba(208,213,221,.85);
  box-shadow:0 18px 48px rgba(16,24,40,.10);
  position:relative;
  overflow:hidden;
}

.card > *{ position:relative; z-index:1; }

/* Marca de agua dentro de la card */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--watermark-url);
  background-repeat:no-repeat;
  background-position: var(--watermark-position);
  background-size: var(--watermark-size);
  opacity: var(--watermark-opacity);
  pointer-events:none;
  z-index:0;
}

/* Barra superior corporativa */
.card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:6px;
  background: linear-gradient(90deg, var(--eco-green), var(--eco-green-2), var(--eco-yellow));
}

.card-top{
  margin-top:6px;
  display:flex;
  justify-content:center;
  text-align:center;
}

h1{
  font-size:19px;
  font-weight:900;
  margin:6px 0 10px;
  letter-spacing:.2px;
}

/* Form */
label{
  display:block;
  font-size:13px;
  margin:10px 0 6px;
  color: var(--muted);
}

input{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(208,213,221,.9);
  border-radius:12px;
  outline:none;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  color: var(--text);
}
input:focus{
  border-color: rgba(0,122,51,.55);
  box-shadow: 0 0 0 4px rgba(0,122,51,.12);
  background: rgba(255,255,255,.65);
}

/* Select consistente */
select{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(208,213,221,.9);
  border-radius:12px;
  outline:none;
  background: rgba(255,255,255,.55);
  color: var(--text);
}
select:focus{
  border-color: rgba(0,122,51,.55);
  box-shadow: 0 0 0 4px rgba(0,122,51,.12);
  background: rgba(255,255,255,.65);
}

/* Botón principal SOLO para forms (evita romper botones internos del sistema) */
form > button{
  width:100%;
  padding:12px 12px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  margin-top:12px;
  font-weight:900;
  color:#0B2A12;
  background: linear-gradient(90deg, var(--eco-yellow), #FFE16A);
}
form > button:hover{ filter: brightness(.98); }
form > button:active{ transform: translateY(1px); }

/* Mensajes */
.small{
  font-size:13px;
  margin-top:10px;
  color: var(--muted);
}

.msg{
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
  font-size:13px;
}
.msg.error{background:#FFECEC; border:1px solid #FFD0D0;}
.msg.ok{background:#ECFFF2; border:1px solid #C8FFD9;}

/* Aviso institucional */
.legal{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(208,213,221,.85);
  background: rgba(255,255,255,.70);
}
.legal-title{
  font-size:12px;
  font-weight:900;
  color: var(--eco-green);
  margin-bottom:4px;
}
.legal-text{
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
}

/* Links */
a{ color: var(--eco-green); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Helpers */
.inline-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 560px){
  .inline-2{ grid-template-columns: 1fr; }
}

/* Responsive fino login */
@media (max-width: 420px){
  .brand-mark{width:80px; height:60px;}
  .brand-app{font-size:15px;}
  .brand-sub{font-size:12.5px;}
  .card{padding:16px;}
}

/* =========================
   ADMIN LAYOUT FULL SCREEN
   ========================= */
body.admin-app{
  margin:0;
  min-height:100vh;
  background: var(--bg);
  display:flex;
  flex-direction:column;
}

/* ===== ADMIN HEADER corporativo ===== */
.admin-header{
  height:68px;
  background: var(--card);
  border-bottom:1px solid rgba(208,213,221,.85);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 10px 26px rgba(16,24,40,.08);

  position:relative; /* ✅ CLAVE: ancla ::before correctamente */
}

.admin-header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:6px;
  background: linear-gradient(90deg, var(--eco-green), var(--eco-green-2), var(--eco-yellow));
  z-index:0; /* ✅ CLAVE: franja detrás */
}

.admin-left,.admin-center,.admin-right{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative; /* ✅ CLAVE */
  z-index:1;         /* ✅ CLAVE: contenido encima de la franja */
}

.admin-logo{
  width:46px;
  height:46px;
  border-radius:14px;
  flex:0 0 auto;
  background: var(--watermark-url) center / 86% no-repeat;
  background-color:#fff;
  border:1.5px solid rgba(0,122,51,.35);
  box-shadow:
    0 8px 18px rgba(16,24,40,.10),
    inset 0 0 0 1px rgba(255,209,0,.25);
}

.admin-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.admin-title strong{
  font-size:15px;
  font-weight:900;
  letter-spacing:.3px;
}
.admin-title span{
  font-size:12px;
  color:var(--muted);
}

.admin-user{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
  text-align:center;
}
.admin-user strong{
  font-size:13px;
  color:var(--text);
  font-weight:900;
}
.admin-user small{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* Hamburger */
.hamburger{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(208,213,221,.9);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2; /* ✅ CLAVE: nunca vuelve a quedar tapado */
}
.hamburger span{
  width:18px;
  height:2px;
  background:#333;
  position:relative;
}
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#333;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

/* Responsive header */
@media (max-width: 760px){
  .admin-center{ display:none; }
  .admin-title span{ display:none; }
  .admin-header{ height:64px; }
  .admin-logo{ width:42px; height:42px; }
}

/* Main */
.admin-content{
  flex:1;
  padding:16px;
  width:100%;
}
.admin-content .card{ max-width:100%; }

/* Drawer */
.admin-drawer{
  position:fixed;
  top:0;
  right:-320px;
  width:300px;
  height:100vh;
  background:var(--card);
  border-left:1px solid rgba(208,213,221,.85);
  box-shadow:-12px 0 24px rgba(16,24,40,.12);
  padding:16px;
  transition:right .25s ease;
  z-index:100;
}
.admin-drawer.open{ right:0; }

.drawer-title{
  font-weight:900;
  margin-bottom:12px;
}
.drawer-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drawer-nav a{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(208,213,221,.8);
  font-weight:700;
  color:var(--text);
}
.drawer-nav a:hover{
  background:rgba(0,122,51,.06);
  text-decoration:none;
}

/* Overlay */
.admin-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:90;
}
.admin-overlay.show{ display:block; }

/* =========================
   Botones utilitarios
   ========================= */
.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(208,213,221,.85);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  font-weight:900;
  color: var(--text);
  text-decoration:none;
}
.btn:hover{
  background: rgba(0,122,51,.06);
  border-color: rgba(0,122,51,.30);
  text-decoration:none;
}
.btn-primary{
  border:none;
  background: linear-gradient(90deg, var(--eco-yellow), #FFE16A);
  color:#0B2A12;
}
.btn-sm{
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
}

/* =========================
   Tabla
   ========================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(208,213,221,.85);
  background: rgba(255,255,255,.78);
}

.table th, .table td{
  padding:10px 10px;
  font-size:13px;
  border-bottom:1px solid rgba(208,213,221,.6);
  text-align:left;
  vertical-align:middle;
}

.table th{
  font-weight:900;
  background: rgba(0,122,51,.06);
}
.table tr:last-child td{ border-bottom:none; }

/* Columnas */
.col-estado{ width:90px; text-align:center; }
.col-acciones{ width:360px; }

/* =========================
   Buscador usuarios
   ========================= */
.user-search{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.user-search input{
  flex:1;
  min-width:220px;
}

/* =========================
   Acciones en tabla usuarios (BOTONES IGUALES)
   ========================= */
.actions-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.actions-row form{ margin:0; }

.btn-action{
  min-width:96px;
  height:36px;
  padding:0 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(208,213,221,.95);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;

  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.btn-action:hover{
  background:rgba(0,122,51,.06);
  border-color:rgba(0,122,51,.35);
  text-decoration:none;
}
.btn-action:active{ transform:translateY(1px); }

.btn-action-edit{
  color:var(--eco-green);
  border-color:rgba(0,122,51,.35);
  background:rgba(0,122,51,.05);
}
.btn-action-edit:hover{ background:rgba(0,122,51,.12); }

.btn-action-toggle{ color:#101828; }

.btn-action-danger{
  color:#8B1C1C;
  border-color:rgba(255,82,82,.55);
  background:rgba(255,236,236,.85);
}
.btn-action-danger:hover{
  background:rgba(255,236,236,1);
  border-color:rgba(255,82,82,.75);
}

/* Móvil: mejor apilado */
@media (max-width:520px){
  .actions-row{ justify-content:flex-start; }
  .btn-action{ min-width:100%; }
}

.btn-danger{
  border:1px solid rgba(255,82,82,.55);
  background: rgba(255,236,236,.85);
  color:#8B1C1C;
}
.btn-danger:hover{
  background: rgba(255,236,236,1);
  border-color: rgba(255,82,82,.75);
}

/* Textarea consistente (sin inline) */
textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(208,213,221,.9);
  border-radius:12px;
  outline:none;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  color: var(--text);
  resize: vertical;
}
textarea:focus{
  border-color: rgba(0,122,51,.55);
  box-shadow: 0 0 0 4px rgba(0,122,51,.12);
  background: rgba(255,255,255,.65);
}

/* Operación meta (op/clave/texto) */
.op-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:6px 0 8px;
  font-size:12px;
  color: var(--muted);
}
.op-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(208,213,221,.9);
  background: rgba(255,255,255,.70);
  font-weight:800;
  color: var(--text);
}
.op-pill strong{ font-weight:900; }

/* Checkbox selector operación opcional */
.op-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 10px;
  font-size:13px;
  color: var(--text);
}
.op-check input{ width:auto; padding:0; }