@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --blue-dark:#0F2B5C;
  --blue:#1E4FA3;
  --blue-soft:#EAF0FB;
  --cream:#FBF3F0;
  --ink:#1C1C1C;
  --gray:#5B5B5B;
  --line:#E3DEDA;
  --green:#1F9254;
  --red:#C0392B;
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--cream);
}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;}

a{color:var(--blue);}

/* ---------- Layout con barra lateral ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:230px;
  background:var(--blue-dark);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:24px 18px;
  flex-shrink:0;
}
.sidebar .brand-mark{display:flex; align-items:center; gap:10px; margin-bottom:34px;}
.sidebar .brand-mark img{width:34px;}
.sidebar .brand-mark span{font-weight:600; font-size:15px; line-height:1.2;}
.sidebar nav{display:flex; flex-direction:column; gap:4px;}
.sidebar nav a{
  color:#C9D6EE; text-decoration:none; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500;
}
.sidebar nav a.active, .sidebar nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar .user-box{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; color:#C9D6EE;}
.sidebar .user-box button{
  margin-top:8px; width:100%; background:transparent; border:1px solid rgba(255,255,255,.3);
  color:#fff; padding:7px; border-radius:8px; cursor:pointer; font-size:13px;
}
.sidebar .user-box button:hover{background:rgba(255,255,255,.1);}

.main{flex:1; padding:32px 40px; max-width:1180px;}
.main h1{font-size:22px; color:var(--blue-dark); margin:0 0 4px;}
.main .subtitle{color:var(--gray); margin:0 0 26px; font-size:14px;}

/* ---------- Tarjetas ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:20px;
}
.card h2{font-size:16px; margin:0 0 16px; color:var(--blue-dark);}

.grid{display:grid; gap:16px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}}

/* ---------- Formularios ---------- */
label{display:block; font-size:13px; font-weight:500; color:var(--gray); margin-bottom:5px;}
input,select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:0; border-color:var(--blue);}
.field{margin-bottom:14px;}
.row{display:flex; gap:14px;}
.row > .field{flex:1;}

button.btn{
  background:var(--blue); color:#fff; border:none; padding:10px 18px; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
}
button.btn:hover{background:var(--blue-dark);}
button.btn.secondary{background:transparent; color:var(--blue); border:1px solid var(--blue);}
button.btn.secondary:hover{background:var(--blue-soft);}
button.btn.danger{background:var(--red);}
button.btn.small{padding:5px 10px; font-size:12px;}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{
  text-align:left; background:var(--blue-soft); color:var(--blue-dark);
  padding:9px 10px; font-weight:600; font-size:12.5px;
}
td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
tr:hover td{background:#FAFBFE;}

.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600;}
.badge.remoto{background:var(--blue-soft); color:var(--blue-dark);}
.badge.presencial{background:#FDECEA; color:var(--red);}
.badge.enviado{background:#E7F6ED; color:var(--green);}
.badge.error{background:#FDECEA; color:var(--red);}
.badge.generado{background:#FFF6E5; color:#946200;}

/* ---------- Barra de progreso ---------- */
.progress-label{display:flex; justify-content:space-between; font-size:12.5px; color:var(--gray); margin-bottom:4px;}
.progress{height:8px; background:var(--blue-soft); border-radius:5px; overflow:hidden;}
.progress > div{height:100%; background:var(--green);}
.progress > div.over{background:var(--red);}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--cream) 0%, #F5EEE9 100%);
}
.login-card{
  background:#fff; border-radius:14px; padding:40px 38px; width:360px;
  box-shadow:0 10px 34px rgba(15,43,92,.08); text-align:center;
}
.login-card img{width:150px; margin-bottom:18px;}
.login-card h1{font-size:17px; color:var(--blue-dark); margin:0 0 22px;}
.login-card .field{text-align:left;}
.login-card button{width:100%; margin-top:6px;}
.error-msg{color:var(--red); font-size:13px; margin-top:10px; min-height:16px;}

.empty-state{color:var(--gray); font-size:13.5px; padding:18px 0; text-align:center;}

/* ---------- Ayudas de entrada del formulario ---------- */
.input-with-btn{display:flex; gap:6px; align-items:stretch;}
.input-with-btn input{flex:1; min-width:0;}
.mini-btn{
  flex-shrink:0; background:var(--blue-soft); color:var(--blue-dark); border:none;
  padding:0 11px; border-radius:7px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.mini-btn:hover{background:#dae6fa;}
.form-hint{font-size:12.5px; color:var(--gray); margin:0 0 14px;}
.form-hint.err{color:var(--red);}
.field .form-hint{margin:4px 0 0;}
.attach-link{background:none; border:0; padding:0; margin-top:4px; color:var(--blue); font-size:12.5px; cursor:pointer; text-decoration:underline; text-align:left; word-break:break-all;}
.attach-link:disabled{opacity:.5; cursor:wait;}
.attach-current{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; word-break:break-all;}
.attach-current[hidden]{display:none;}
.form-actions{display:flex; gap:10px;}

.shortcuts{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px;}
.shortcuts[hidden]{display:none;}
.shortcuts-label{font-size:12.5px; font-weight:600; color:var(--gray);}
.chip{
  background:#fff; border:1px solid var(--line); color:var(--blue-dark);
  padding:5px 11px; border-radius:16px; font-size:12.5px; cursor:pointer;
  font-family:inherit; max-width:260px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.chip:hover{background:var(--blue-soft); border-color:var(--blue);}

/* ---------- Cronómetro de servicio en vivo ---------- */
.timer-bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--cream); border-bottom:1px solid var(--line);
  padding:10px 0; margin-bottom:18px;
}
#timerRunning{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
#timerRunning[hidden]{display:none;}
.timer-clock{
  font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700;
  color:var(--blue-dark); font-variant-numeric:tabular-nums; letter-spacing:.5px;
}
.timer-clock.warn{color:var(--red);}
.timer-clock.paused{color:var(--gray); opacity:.7;}
.timer-meta{font-size:13px; color:var(--gray);}
.timer-note{width:220px;}

/* ---------- Filtros de la lista de registros ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px;}
.filters select{width:auto; min-width:150px; font-size:13px; padding:7px 9px;}
.filters input[type="search"]{width:auto; min-width:210px; font-size:13px; padding:7px 9px;}
.filters-count{margin-left:auto; font-size:12.5px; color:var(--gray);}

/* ---------- Inventario de equipos ---------- */
.modal-box.modal-tall{width:640px; max-height:88vh; overflow-y:auto;}
.form-sec{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.5px; color:var(--blue);
  margin:18px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.form-sec:first-of-type{margin-top:2px;}
.form-sec-note{text-transform:none; letter-spacing:0; font-weight:400; color:var(--gray); font-size:11.5px;}
.eq-badge{
  display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:11.5px; font-weight:600; background:var(--blue-soft); color:var(--blue-dark);
}
.eq-badge.s-activo{background:#E7F6ED; color:var(--green);}
.eq-badge.s-en_taller{background:#FFF6E5; color:#946200;}
.eq-badge.s-bodega{background:var(--blue-soft); color:var(--blue-dark);}
.eq-badge.s-por_asignar{background:#F0E9FB; color:#5B3FA3;}
.eq-badge.s-de_baja{background:#FDECEA; color:var(--red);}
.eq-events{list-style:none; padding:0; margin:8px 0 4px; font-size:13px;}
.eq-events li{padding:7px 2px; border-bottom:1px solid var(--line); line-height:1.5;}
.eq-ev-date{color:var(--gray); margin-right:8px; font-variant-numeric:tabular-nums;}
.eq-ev-by{color:var(--gray); font-size:11.5px;}
.eq-sub{color:var(--gray); font-size:11.5px;}
.asset-code{font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:600; font-size:12.5px; color:var(--blue-dark); white-space:nowrap;}
.asset-code-lg{font-size:16px; padding:6px 0;}
.eq-acta-hint{font-size:12.5px; color:var(--gray); margin:0 0 12px;}
.acta-acc{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.acta-acc label.inline{display:flex; align-items:center; gap:5px; font-weight:400; color:var(--ink); margin:0;}
.acta-acc input[type="checkbox"]{width:auto;}
.acta-acc input[type="text"]{width:auto; min-width:130px;}
.toast .toast-action{
  margin-left:12px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55);
  color:#fff; padding:3px 10px; border-radius:6px; font-size:12.5px;
  cursor:pointer; font-family:inherit;
}

/* ---------- Acciones en fila de tabla ---------- */
td.row-actions{white-space:nowrap;}
td.row-actions .btn + .btn{margin-left:6px;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(15,43,92,.45);
  display:flex; align-items:center; justify-content:center;
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  background:#fff; border-radius:12px; padding:24px 24px 20px; width:340px;
  box-shadow:0 14px 40px rgba(15,43,92,.22);
}
.modal-box h3{
  font-family:'Space Grotesk',sans-serif; font-size:16px;
  color:var(--blue-dark); margin:0 0 16px;
}
.modal-box .actions{display:flex; gap:10px; margin-top:4px;}
.modal-box .actions .btn{flex:1;}
.modal-box.modal-form{width:460px; max-width:calc(100vw - 32px);}
.modal-box.modal-form .row{flex-wrap:wrap;}
.modal-box.modal-form .row > .field{min-width:120px;}

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--blue-dark); color:#fff;
  padding:12px 18px; border-radius:8px; font-size:13.5px; box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0; transform:translateY(10px); transition:.25s;
}
.toast.show{opacity:1; transform:translateY(0);}
.toast.err{background:var(--red);}

/* ============================================================
   Responsive / móvil  (Fase 1: que sea usable desde el celular)
   ============================================================ */
@media (max-width: 760px) {

  /* --- Layout: barra lateral -> barra superior --- */
  .app-shell{flex-direction:column;}

  .sidebar{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
    padding:12px 16px;
    position:sticky; top:0; z-index:30;
  }
  .sidebar .brand-mark{margin:0 auto 0 0;}
  .sidebar .brand-mark img{width:24px;}
  .sidebar .brand-mark span{font-size:12px;}
  .sidebar nav{flex-direction:row; gap:4px; width:100%; order:3; overflow-x:auto;}
  .sidebar nav a{flex:1 0 auto; text-align:center; padding:7px 12px; font-size:12px; white-space:nowrap;}
  .sidebar .user-box{
    order:2; margin:0; padding:0; border-top:none;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  }
  .sidebar .user-box #userName{font-size:11.5px;}
  .sidebar .user-box button{margin-top:0; width:auto; padding:5px 9px; font-size:11.5px;}

  /* --- Contenido a ancho completo --- */
  .main{padding:16px 14px; max-width:100%;}
  .main h1{font-size:19px;}
  .main .subtitle{margin-bottom:18px;}
  .card{padding:16px 14px;}

  /* --- Formularios apilados --- */
  .row{flex-direction:column; gap:0;}
  .form-actions{flex-direction:column;}
  .form-actions .btn{width:100%;}
  /* 16px evita el auto-zoom de iOS al enfocar un campo */
  input, select, textarea{font-size:16px;}

  /* --- Filtros --- */
  .filters{gap:8px;}
  .filters select,
  .filters input[type="search"]{width:100%; min-width:0; font-size:16px;}
  .filters-count{order:99; width:100%; margin-left:0;}
  .filters .btn{width:100%; margin-left:0 !important;}

  /* --- Botones táctiles --- */
  .btn{padding:11px 16px;}
  .btn.small{padding:8px 12px; font-size:12.5px;}
  td.row-actions{white-space:normal;}
  td.row-actions .btn{display:inline-block; margin:2px 4px 2px 0;}
  td.row-actions .btn + .btn{margin-left:0;}

  /* --- Modales a pantalla --- */
  .modal-overlay{align-items:flex-start; padding:12px;}
  .modal-box,
  .modal-box.modal-form,
  .modal-box.modal-tall{
    width:100%; max-width:100%;
    max-height:calc(100vh - 24px); overflow-y:auto;
  }
  .modal-box .actions{flex-direction:column-reverse;}
  .modal-box .actions .btn{width:100%;}

  /* --- Cronómetro --- */
  .timer-bar{position:static;}
  .timer-note{width:100%;}
  #timerRunning{width:100%;}
  #timerRunning .btn{flex:1;}

  /* --- Login --- */
  .login-card{width:100%; max-width:360px; padding:30px 22px;}

  /* --- Tablas: que puedan hacer scroll horizontal sin romper la página --- */
  .main .card table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table{font-size:12.5px;}
  th, td{padding:8px;}

  /* --- Listas principales como tarjetas (Registro de horas, Equipos) --- */
  .card table.cards-mobile,
  .card table.cards-mobile tbody,
  .card table.cards-mobile tr,
  .card table.cards-mobile td{display:block; width:100%; overflow:visible;}
  .card table.cards-mobile thead{display:none;}
  .card table.cards-mobile tr{
    border:1px solid var(--line); border-radius:10px;
    margin-bottom:10px; padding:8px 12px; background:#fff;
  }
  .card table.cards-mobile tr:hover td{background:transparent;}
  .card table.cards-mobile td{
    border:none; padding:4px 0; font-size:13px;
    display:flex; gap:12px; justify-content:space-between; align-items:baseline;
  }
  .card table.cards-mobile td::before{
    content:attr(data-label);
    flex:0 0 auto; font-weight:600; color:var(--gray);
    font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  }
  .card table.cards-mobile td.td-block{flex-direction:column; align-items:stretch; gap:2px;}
  .card table.cards-mobile td .eq-sub{display:block;}
  .card table.cards-mobile td.row-actions{
    justify-content:flex-start; flex-wrap:wrap; gap:8px;
    border-top:1px solid var(--line); margin-top:6px; padding-top:10px;
  }
  .card table.cards-mobile td.row-actions::before,
  .card table.cards-mobile td.empty-state::before{content:none;}
  .card table.cards-mobile td.empty-state{display:block; text-align:center; border:none;}
  .card table.cards-mobile td.row-actions .btn{margin:0;}
}

/* ---------- Repositorio de claves ---------- */
.chip.chip-on{background:var(--blue); border-color:var(--blue); color:#fff;}
.eq-badge.cl-sys{background:var(--blue-soft); color:var(--blue-dark); white-space:nowrap;}
.cl-user,.cl-pass{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; word-break:break-all;}
.cl-pass-cell{white-space:nowrap;}
.cl-pass-cell .mini-btn{margin-left:4px; padding:4px 9px;}
.eq-events code{font-family:ui-monospace, Menlo, Consolas, monospace; background:var(--blue-soft); padding:1px 6px; border-radius:4px;}
.cl-det-row td{background:var(--blue-soft);}
.cl-det{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px 18px; font-size:13px; padding:4px 0;}
.cl-det .eq-sub{font-size:11px; text-transform:uppercase; letter-spacing:.3px;}
.cl-det-wide{grid-column:1 / -1; white-space:pre-wrap;}