:root{
  --navy:#01133F; --blue:#236DC4; --blue-700:#1a5aa8; --blue-50:#eef4ff;
  --gold:#B5A926; --gold-dark:#8f8420;
  --ink:#131c2e; --ink-soft:#5a6a85; --gray:#8a93a6; --line:#e4e8f2; --gray-bg:#f7f8fb;
  --green:#2e7d4f; --red:#b5453f; --shadow:0 2px 10px rgba(20,30,60,0.06);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--gray-bg);color:var(--ink);}

/* ---------- Login ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--navy),var(--blue-700));padding:20px;}
.login-card{background:#fff;border-radius:18px;padding:40px 36px;width:380px;max-width:100%;box-shadow:0 20px 50px rgba(0,0,0,0.25);text-align:center;}
.login-logo{font-size:42px;margin-bottom:6px;}
.login-card h1{font-size:21px;margin:0 0 4px;color:var(--navy);}
.login-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 24px;}
.login-error{background:#fbebea;color:var(--red);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px;text-align:left;}
.login-card .field2{text-align:left;margin-bottom:14px;}

/* ---------- Layout ---------- */
.topbar{background:var(--navy);color:#fff;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;}
.topbar-brand{font-weight:700;font-size:16px;}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.admin-nombre{font-size:13px;color:rgba(255,255,255,0.75);}
.topbar .btn{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);}
.topbar .btn:hover{background:rgba(255,255,255,0.18);}

.main{max-width:960px;margin:0 auto;padding:32px 24px 60px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:16px;flex-wrap:wrap;}
.page-head h1{font-size:22px;margin:0 0 4px;color:var(--navy);}
.page-sub{font-size:13px;color:var(--ink-soft);margin:0;}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.vacio{color:var(--gray);font-size:13.5px;padding:30px;text-align:center;margin:0;}

/* ---------- Tabla de novedades ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);padding:14px 18px 10px;box-shadow:inset 0 -2px 0 var(--gold);}
tbody td{padding:14px 18px;box-shadow:inset 0 -1px 0 var(--line);vertical-align:top;}
tbody tr:last-child td{box-shadow:none;}
.nov-titulo-cell{max-width:320px;}
.nov-titulo-cell b{display:block;color:var(--ink);}
.nov-resumen{font-size:12px;color:var(--ink-soft);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.pill.ok{background:#e6f4ea;color:var(--green);}
.pill.gray{background:#eef0f5;color:var(--ink-soft);}
.pill.tipo-funcion{background:#eef4ff;color:var(--blue-700);}
.pill.tipo-actualizacion{background:#fbf3de;color:var(--gold-dark);}
.pill.tipo-aviso{background:#fbebea;color:var(--red);}

.row-actions{display:flex;gap:8px;justify-content:flex-end;}

/* ---------- Botones y campos (compartido con modales) ---------- */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .12s;}
.btn:hover{background:var(--gray-bg);}
.btn.small{padding:6px 12px;font-size:12.5px;}
.btn.teal{background:var(--blue-700);color:#fff;border-color:var(--blue-700);}
.btn.teal:hover{background:var(--navy);}
.btn.danger{color:var(--red);}
.btn.full{width:100%;margin-top:6px;}

.field2{margin-bottom:14px;}
.field2 label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field2 .opcional{font-weight:400;color:var(--gray);}
.field2 input[type=text],.field2 input[type=password],.field2 input:not([type]),.field2 select,.field2 textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;
}
.field2 input:focus,.field2 select:focus,.field2 textarea:focus{outline:none;border-color:var(--blue);}
.field2 textarea{resize:vertical;line-height:1.5;}

.check-line{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer;margin-top:4px;}
.check-line input{width:16px;height:16px;}

/* ---------- Modal ---------- */
.overlay{display:none;position:fixed;inset:0;background:rgba(10,20,45,0.55);align-items:center;justify-content:center;z-index:100;padding:20px;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,0.3);}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);}
.modal-head h3{margin:0;font-size:17px;color:var(--navy);}
.modal-close{background:none;border:none;font-size:18px;color:var(--gray);cursor:pointer;}
.modal-body{padding:22px 24px;}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line);}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 22px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,0.25);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:640px){
  .main{padding:20px 14px 50px;}
  .topbar{padding:12px 16px;}
  table, thead, tbody, tr, th, td{display:block;}
  thead{display:none;}
  tbody tr{border-bottom:8px solid var(--gray-bg);padding:14px 4px;}
  tbody td{box-shadow:none;padding:6px 4px;}
}