/* ============================================================
   Inventario de equipos · estilo propio

   Dos ideas sostienen todo:

   1. El contenido es maquinal — hostnames, seriales, IPs. La
      monoespaciada es la tipografia principal, no un detalle
      para el codigo. Consolas ya esta en todos los Windows.

   2. Lo que importa es el silencio. Un equipo que reporta todos
      los dias no necesita atencion; uno que dejo de hacerlo si.
      Por eso el color solo aparece en el estado de reporte.
   ============================================================ */

   :root{
    --tinta:      #14171A;
    --tinta-2:    #59636D;
    --tinta-3:    #8A939B;
    --papel:      #EFF1F2;
    --panel:      #FFFFFF;
    --linea:      #DCE0E3;
    --linea-2:    #C3C9CE;
  
    --al-dia:     #0E7C66;
    --demorado:   #A96400;
    --callado:    #B3261E;
    --nunca:      #98A1A9;
  
    --mono: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace;
    --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    background:var(--papel);
    color:var(--tinta);
    font-family:var(--sans);
    font-size:14px;
    line-height:1.5;
  }
  
  /* ---- Barra superior ------------------------------------- */
  
  .barra{
    background:var(--tinta);
    color:#fff;
    padding:14px 28px 0;
  }
  
  .barra-fila{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:24px;
    max-width:1180px;
    margin:0 auto;
    flex-wrap:wrap;
  }
  
  .marca{
    font-family:var(--mono);
    font-size:15px;
    letter-spacing:.02em;
  }
  .marca b{ font-weight:600; }
  .marca span{ color:var(--tinta-3); }
  
  .menu{ display:flex; gap:2px; }
  
  .menu a{
    color:#B9C1C8;
    text-decoration:none;
    font-family:var(--mono);
    font-size:13px;
    padding:7px 13px 9px;
    border-bottom:2px solid transparent;
  }
  .menu a:hover{ color:#fff; }
  .menu a.activo{ color:#fff; border-bottom-color:#fff; }
  
  /* Regla graduada: la referencia visual es una cinta metrica,
     el instrumento de quien inventaria. */
  .regla{
    height:7px;
    background-image:repeating-linear-gradient(
      to right,
      var(--linea-2) 0 1px, transparent 1px 12px);
    background-color:var(--panel);
  }
  
  /* ---- Contenido ------------------------------------------- */
  
  .contenido{
    max-width:1180px;
    margin:0 auto;
    padding:28px;
  }
  
  h1{
    font-family:var(--mono);
    font-size:19px;
    font-weight:600;
    margin:0 0 3px;
    letter-spacing:-.01em;
  }
  
  .subtitulo{
    color:var(--tinta-2);
    margin:0 0 22px;
    font-size:13.5px;
  }
  
  /* ---- Tablero de estado ----------------------------------- */
  
  .tablero{
    display:flex;
    gap:1px;
    background:var(--linea);
    border:1px solid var(--linea);
    margin-bottom:26px;
  }
  
  .dato{
    background:var(--panel);
    padding:15px 20px;
    flex:1 1 0;
    min-width:120px;
  }
  
  .dato-cifra{
    font-family:var(--mono);
    font-size:27px;
    font-weight:600;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
  }
  
  .dato-nombre{
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--tinta-2);
    margin-top:3px;
  }
  
  .dato.alerta .dato-cifra{ color:var(--callado); }
  .dato.alerta .dato-nombre{ color:var(--callado); }
  
  /* ---- Tabla ----------------------------------------------- */
  
  .marco{
    background:var(--panel);
    border:1px solid var(--linea);
    overflow-x:auto;
  }
  
  table{ border-collapse:collapse; width:100%; }
  
  th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--tinta-2);
    font-weight:600;
    padding:10px 14px;
    border-bottom:1px solid var(--linea-2);
    white-space:nowrap;
  }
  
  td{
    padding:11px 14px;
    border-bottom:1px solid var(--linea);
    vertical-align:top;
  }
  
  tbody tr:last-child td{ border-bottom:0; }
  tbody tr:hover{ background:#F7F9F9; }
  
  /* Todo lo que es dato de maquina va en monoespaciada. */
  .maquina{
    font-family:var(--mono);
    font-size:13px;
    font-variant-numeric:tabular-nums;
  }
  
  .nombre-equipo{
    font-family:var(--mono);
    font-size:13.5px;
    font-weight:600;
  }
  
  .largo{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--tinta-2);
    word-break:break-all;
    max-width:230px;
    display:inline-block;
  }
  
  .vacio{ color:var(--tinta-3); }
  
  /* ---- Estado de reporte ----------------------------------- */
  
  /* El filo de color es lo primero que se ve al recorrer la lista:
     una columna de marcas donde el ojo salta a lo que no esta bien. */
  td.filo{
    padding:0;
    width:3px;
    border-bottom:1px solid var(--linea);
  }
  tr.al_dia   td.filo{ background:var(--al-dia); }
  tr.demorado td.filo{ background:var(--demorado); }
  tr.callado  td.filo{ background:var(--callado); }
  tr.nunca    td.filo{ background:var(--nunca); }
  
  .cuando{ font-family:var(--mono); font-size:12.5px; }
  .cuando b{ font-weight:600; display:block; }
  .cuando span{ color:var(--tinta-2); font-size:11.5px; }
  
  tr.callado .cuando b{ color:var(--callado); }
  tr.nunca   .cuando b{ color:var(--nunca); }
  
  /* ---- Formularios ----------------------------------------- */
  
  .forma{
    display:flex;
    gap:8px;
    margin:0 0 20px;
    flex-wrap:wrap;
  }
  
  input[type=text]{
    font-family:var(--mono);
    font-size:13.5px;
    padding:8px 11px;
    border:1px solid var(--linea-2);
    background:var(--panel);
    color:var(--tinta);
    min-width:260px;
  }
  
  input[type=text]:focus{
    outline:2px solid var(--al-dia);
    outline-offset:-1px;
    border-color:var(--al-dia);
  }
  
  button{
    font-family:var(--mono);
    font-size:13.5px;
    padding:8px 17px;
    border:1px solid var(--tinta);
    background:var(--tinta);
    color:#fff;
    cursor:pointer;
  }
  button:hover{ background:#000; }
  button:focus-visible{ outline:2px solid var(--al-dia); outline-offset:2px; }
  
  .sin-nada{
    padding:26px 14px;
    color:var(--tinta-2);
    font-size:13.5px;
  }
  
  /* ---- Angosto --------------------------------------------- */
  
  @media (max-width:820px){
    .contenido{ padding:18px; }
    .barra{ padding:12px 18px 0; }
    .tablero{ flex-wrap:wrap; }
    .largo{ max-width:150px; }
  }
  
  /* ============================================================
     Fase 3 · sesion, buscador y ficha del equipo
     ============================================================ */
  
  /* La celda del filo no debe arrastrar el ancho de la columna. */
  th:first-child{ width:3px; padding:0; }
  
  .menu a.salir{ color:var(--tinta-3); margin-left:10px; }
  .menu a.salir:hover{ color:#fff; }
  
  /* ---- Entrar ---------------------------------------------- */
  
  .pagina-entrar{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  
  .tarjeta-entrar{
    background:var(--panel);
    border:1px solid var(--linea);
    border-top:3px solid var(--tinta);
    padding:30px 30px 32px;
    width:100%;
    max-width:340px;
  }
  
  .marca-entrar{
    font-family:var(--mono);
    font-size:15px;
    margin-bottom:24px;
  }
  .marca-entrar b{ font-weight:600; }
  .marca-entrar span{ color:var(--tinta-3); }
  
  .tarjeta-entrar label{
    display:block;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--tinta-2);
    margin:0 0 5px;
  }
  
  .tarjeta-entrar input{
    width:100%;
    font-family:var(--mono);
    font-size:14px;
    padding:9px 11px;
    border:1px solid var(--linea-2);
    background:var(--panel);
    color:var(--tinta);
    margin-bottom:17px;
  }
  .tarjeta-entrar input:focus{
    outline:2px solid var(--al-dia);
    outline-offset:-1px;
    border-color:var(--al-dia);
  }
  
  .tarjeta-entrar button{ width:100%; padding:10px; }
  
  .aviso-error{
    background:#FBEDEC;
    border-left:3px solid var(--callado);
    color:var(--callado);
    font-size:13px;
    padding:10px 12px;
    margin:0 0 18px;
  }
  
  .aviso-ok{
    background:#E9F4F0;
    border-left:3px solid var(--al-dia);
    color:var(--al-dia);
    font-size:13px;
    padding:10px 12px;
    margin:0 0 20px;
  }
  
  /* ---- Listado --------------------------------------------- */
  
  a.nombre-equipo{ color:var(--tinta); text-decoration:none; }
  a.nombre-equipo:hover{ text-decoration:underline; }
  
  a.ver{
    font-family:var(--mono);
    font-size:12px;
    color:var(--tinta-2);
    text-decoration:none;
    border-bottom:1px solid var(--linea-2);
  }
  a.ver:hover{ color:var(--tinta); border-bottom-color:var(--tinta); }
  
  .marca-estado{
    font-family:var(--mono);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--demorado);
    border:1px solid var(--demorado);
    padding:1px 5px;
    margin-left:7px;
    white-space:nowrap;
  }
  
  .boton-suave{
    font-family:var(--mono);
    font-size:13.5px;
    padding:8px 15px;
    border:1px solid var(--linea-2);
    color:var(--tinta-2);
    text-decoration:none;
    background:var(--panel);
  }
  .boton-suave:hover{ color:var(--tinta); border-color:var(--tinta); }
  
  .migaja{ margin:0 0 14px; font-size:13px; }
  .migaja a{ color:var(--tinta-2); text-decoration:none; font-family:var(--mono); }
  .migaja a:hover{ color:var(--tinta); }
  
  /* ---- Ficha ----------------------------------------------- */
  
  .dos-columnas{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:start;
  }
  
  .bloque{ padding:20px 22px 24px; }
  
  .bloque h2{
    font-family:var(--mono);
    font-size:14px;
    font-weight:600;
    margin:0 0 2px;
  }
  
  .nota{
    color:var(--tinta-2);
    font-size:12px;
    margin:0 0 18px;
  }
  
  .datos{ margin:0; }
  .datos dt{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--tinta-2);
    margin-top:13px;
  }
  .datos dd{
    margin:2px 0 0;
    font-size:13.5px;
  }
  .datos dd.largo{ max-width:100%; }
  
  .formulario label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--tinta-2);
    margin:14px 0 5px;
  }
  
  .formulario input,
  .formulario select,
  .formulario textarea{
    width:100%;
    font-family:var(--mono);
    font-size:13.5px;
    padding:8px 10px;
    border:1px solid var(--linea-2);
    background:var(--panel);
    color:var(--tinta);
  }
  
  .formulario textarea{ resize:vertical; line-height:1.5; }
  
  .formulario input:focus,
  .formulario select:focus,
  .formulario textarea:focus{
    outline:2px solid var(--al-dia);
    outline-offset:-1px;
    border-color:var(--al-dia);
  }
  
  .pie-formulario{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:20px;
    flex-wrap:wrap;
  }
  .pie-formulario .nota{ margin:0; }
  
  @media (max-width:820px){
    .dos-columnas{ grid-template-columns:1fr; }
  }