@charset "utf-8";

/* CSS Document */

/* =========================
   SAMeR Trabajos - UI Theme
   Paleta: #163f87 #4740c8 #ff8734 #6ac1ec + grises suaves
   Pegalo al FINAL del style.css
========================= */

:root{
  --samer-primary: #163f87;
  --samer-secondary: #4740c8;
  --samer-accent: #ff8734;
  --samer-sky: #6ac1ec;

  --samer-bg: #f4f6f8;
  --samer-card: #ffffff;
  --samer-border: rgba(22,63,135,.12);
  --samer-text: #0f172a;
  --samer-muted: rgba(15,23,42,.65);

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 12px;

  --shadow-md: 0 10px 30px rgba(15,23,42,.08);
  --shadow-sm: 0 8px 18px rgba(15,23,42,.06);

  --ring: 0 0 0 4px rgba(106,193,236,.28);
}

/* Fondo general más “app” */
body{
  background: radial-gradient(900px 420px at 15% 0%,
              rgba(71,64,200,.10) 0%,
              rgba(22,63,135,.08) 35%,
              rgba(255,135,52,.06) 70%,
              transparent 100%),
              var(--samer-bg) !important;
  color: var(--samer-text);
}

/* =========================
   Topbar (logo + acciones)
========================= */
.samer-topbar{
  background: var(--samer-primary); margin: 0; padding: 0;
}
.samer-topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.samer-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.samer-brand__logo{
  height: auto!important;   /* probá 80, 88 o 96 */
  width: auto;
}
.samer-topbar__actions{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.samer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .2px;
  border-radius: 999px;
  padding: 12px 22px;
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease, opacity .18s ease;
  user-select:none;
}
.samer-btn--pill{
  background: var(--samer-accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.samer-btn--pill:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.samer-btn--ghost{
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.samer-btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
}
@media (max-width: 520px){
  .samer-brand__logo{ height: 46px; }
  .samer-btn{ padding: 10px 16px; }
}

/* Contenedor */
.trabajos-wrap{
  max-width: 100%!important;
  margin: 26px auto;
  padding: 0 16px;
}

/* Card */
.card-samer{
  background: var(--samer-card);
  border: 1px solid var(--samer-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 18px 18px;
}

/* Header del panel (estilo “barra”) */
.card-samer.topbar-like{
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.card-samer.topbar-like::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(22,63,135,.16),
      rgba(71,64,200,.14),
      rgba(106,193,236,.10),
      rgba(255,135,52,.10)
    );
  opacity:.65;
  pointer-events:none;
}
.card-samer.topbar-like > *{
  position: relative;
}

/* Títulos */
.celeste{
  color: var(--samer-primary) !important;
  letter-spacing: .2px;
}
h3, h4{
  margin-bottom: 12px;
}

/* Texto secundario */
.muted{
  color: var(--samer-muted);
}

/* Tabs tipo pill (para links de pestañas) */
.tabs-samer{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tabs-samer a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--samer-border);
  background: rgba(255,255,255,.75);
  text-decoration:none;
  color: var(--samer-primary);
  font-weight: 700;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.tabs-samer a:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.tabs-samer a.is-active{
  background: linear-gradient(90deg, var(--samer-primary), var(--samer-secondary));
  color: #fff;
  border-color: transparent;
}

/* Inputs más “pro” */
.input-samer, select.input-samer, textarea.input-samer{
  width: 100%;
  border: 1px solid var(--samer-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  outline: none;
  background: rgba(255,255,255,.92);
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;
}
.input-samer:focus, select.input-samer:focus, textarea.input-samer:focus{
  border-color: rgba(106,193,236,.65);
  box-shadow: var(--ring);
}
textarea.input-samer{
  min-height: 110px;
}

/* Botones */
.btn-samer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, var(--samer-primary), var(--samer-secondary));
  box-shadow: 0 10px 22px rgba(71,64,200,.18);
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-samer:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(71,64,200,.22);
}
.btn-samer:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform:none;
  box-shadow:none;
}

/* Botón secundario (para “Salir”, “Volver”, etc.) */
.btn-samer.outline{
  background: transparent;
  color: var(--samer-primary);
  border: 1px solid var(--samer-border);
  box-shadow: none;
}
.btn-samer.outline:hover{
  background: rgba(22,63,135,.06);
  box-shadow: var(--shadow-sm);
}

/* Badge estado (Borrador/Enviado) */
.badge-samer{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid var(--samer-border);
  background: rgba(255,255,255,.8);
}
.badge-samer.draft{
  color: var(--samer-primary);
}
.badge-samer.sent{
  color: #0b6;
  border-color: rgba(11,102,0,.18);
  background: rgba(11,102,0,.06);
}
.badge-samer.warn{
  color: #c60;
  border-color: rgba(204,102,0,.22);
  background: rgba(255,135,52,.10);
}

/* Grid */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Tablas */
table{
  border-radius: var(--radius-lg);
  overflow:hidden;
}
thead th{
  background: rgba(22,63,135,.06);
  color: var(--samer-primary);
}

/* Links */
a{
  color: var(--samer-secondary);
}
a:hover{
  color: var(--samer-primary);
}

@media (max-width: 520px){
  .samer-brand__logo{ height: 64px; }
}

/* =========================
   PATCH estética (tipos + form + inputs)
   Pegalo al FINAL
========================= */

/* Tipografías + base */
:root{
  --font-ui: "Inter", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body{
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5{
  font-family: var(--font-ui) !important;
  letter-spacing: -0.2px;
}

h3{
  font-weight: 800;
  font-size: 20px;
}

/* Topbar un toque más fina y elegante */
.samer-topbar__inner{
  max-width: none;            /* full width */
  padding: 14px 28px;         /* menos alto */
}

/* OJO: tu logo lo dejaste en height:auto!important; eso lo vuelve “caprichoso”.
   Mejor controlarlo con max-height */
.samer-brand__logo{
  height: auto !important;
  max-height: auto;           /* ajustá 62–78 según gusto */
  width: auto;
}

/* Contenedor general: más “centrado” */
.trabajos-wrap{
  max-width: 980px;           /* antes 1100 */
  margin: 34px auto;
  padding: 0 18px;
}

/* Card más premium */
.card-samer{
  border-radius: 22px;
  padding: 26px 26px;
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
}

/* ✅ CLAVE: evitar inputs kilométricos
   Si tu login está dentro de .card-samer, esto lo centra y limita el ancho */
.card-samer form{
  max-width: 520px;           /* ajustá 460–560 */
  margin: 0 auto;
}

/* Labels más prolijos */
label{
  display:block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.72);
  margin: 14px 0 8px;
}

/* Inputs: más compactos y “pro” */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea{
  width: 100%;
  max-width: 520px;           /* por si no engancha el form */
  margin: 0 auto;
  display: block;

  border: 1px solid rgba(22,63,135,.14);
  border-radius: 14px;
  padding: 11px 14px;         /* menos alto */
  font-size: 14px;

  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(71,64,200,.40);
  box-shadow: 0 0 0 4px rgba(71,64,200,.12);
}

/* Botón principal: menos “gordo”, más elegante */
.btn-samer,
button[type="submit"],
input[type="submit"]{
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Links bajo el botón: más “UI” */
.card-samer a{
  font-weight: 700;
  text-decoration: none;
}
.card-samer a:hover{
  text-decoration: underline;
}

/* Mobile: que no explote */
@media (max-width: 640px){
  .samer-topbar__inner{ padding: 12px 16px; }
  .samer-brand__logo{ max-height: 54px; }
  .card-samer{ padding: 18px; }
  .card-samer form{ max-width: 100%; }
}


/* ===== FIX TIPOGRAFÍA + BASE ===== */
:root{
  --font-ui: "Inter","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

html, body{
  font-family: var(--font-ui) !important;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5{
  font-family: var(--font-ui) !important;
  letter-spacing: -0.2px;
}

h3{
  font-weight: 800;
  font-size: 20px;
}

/* Inputs más “compactos” + consistentes */
.input-samer{
  font-family: var(--font-ui) !important;
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto;
  display: block;
}

.card-samer form{
  max-width: 520px;
  margin: 0 auto;
}


.separarcampos{ margin-left: 25px;
}

/* =========================
   ADMIN TABLE: más compacto + títulos multilínea
========================= */

.card-samer table{
  width: 100%;
  table-layout: fixed;            /* para que el header llegue al borde */
  border-collapse: separate;      /* permite spacing */
  border-spacing: 0 10px;         /* separación entre filas */
}

/* Banda celeste de header de punta a punta */
.card-samer thead tr{
  background: rgba(22,63,135,.06);
}
.card-samer thead th{
  text-align: left;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  padding: 10px 14px;
  background: transparent;        /* lo maneja el TR */
  color: var(--samer-primary);
  white-space: nowrap;
}
.card-samer thead th:last-child{
  padding-right: 24px;            /* que “Acción” llegue al margen */
}

.card-samer tbody td{
  padding: 12px 14px;
  vertical-align: middle;
  background: rgba(255,255,255,.85);
  border-top: 1px solid rgba(22,63,135,.10);
  border-bottom: 1px solid rgba(22,63,135,.10);
}

/* Bordes redondeados por fila */
.card-samer tbody tr td:first-child{
  border-left: 1px solid rgba(22,63,135,.10);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.card-samer tbody tr td:last-child{
  border-right: 1px solid rgba(22,63,135,.10);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  padding-right: 24px;
}

/* Cols compactas a la derecha (Estado / Aceptado / Acción) */
.table-samer .col-estado{ width: 80px; text-align:center; white-space:nowrap; }
.table-samer .col-aceptado{ width: 80px; text-align:center; white-space:nowrap; }
.table-samer .col-accion{ width: 80px; text-align:right; white-space:nowrap; }

/* Autor: 1 línea (con corte prolijo) */
.table-samer .col-autor{
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Título: multi-línea (sin puntos suspensivos) */
.table-samer .col-titulo{
  white-space: normal;
  line-height: 1.25em;
  word-break: break-word;
}

/* Bordes redondeados por fila */
.card-samer tbody tr td:first-child{
  border-left: 1px solid rgba(22,63,135,.10);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.card-samer tbody tr td:last-child{
  border-right: 1px solid rgba(22,63,135,.10);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Que no se aplasten las columnas “chicas” */
.card-samer thead th:nth-child(3),
.card-samer tbody td:nth-child(3){
  width: 130px;   /* Categoría */
  white-space: nowrap;
}

.card-samer thead th:nth-child(4),
.card-samer tbody td:nth-child(4){
  width: 120px;   /* Estado */
  white-space: nowrap;
}

.card-samer thead th:nth-child(5),
.card-samer tbody td:nth-child(5){
  width: 120px;   /* Acción */
  white-space: nowrap;
  text-align: right;
}

/* Autor: permitimos cortar bien si es larguísimo */
.card-samer tbody td:nth-child(1){
  max-width: 380px;
  word-break: break-word;
}

/* Email: no lo rompas a mitad de palabra */
.card-samer tbody td:nth-child(2){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* Badge simple para estado (si no lo tenés, igual no molesta) */
.badge-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px; 
 
}
.badge-status--draft{
  color: var(--samer-primary);
  background: rgba(22,63,135,.08);
  border: 1px solid rgba(22,63,135,.14);
}
.badge-status--sent{
  color: #0b6;
  background: rgba(11,102,0,.08);
  border: 1px solid rgba(11,102,0,.16);
}

/* Mobile: tabla scrolleable si no entra */
@media (max-width: 820px){
  .card-samer{ overflow-x: auto; }
  .card-samer table{ min-width: 760px; }
}

/* === Ajuste fino columnas admin autores === */

/* Anchos exactos */
.admin-table .col-titulo,
.admin-table th.col-titulo{
  width: 52%!important;
}

.admin-table .col-eje,
.admin-table th.col-eje{
  width: 13%!important;
}

.admin-table .col-estado,
.admin-table th.col-estado{
  width: 13%!important;
  text-align: center;
}

.admin-table .col-aceptado,
.admin-table th.col-aceptado{
  width: 4%!important;
  text-align: center;
}

.admin-table .col-accion,
.admin-table th.col-accion{
  width: 7%!important;
  text-align: center;
}

/* Tipografía más chica para que entre mejor */
.admin-table td.col-titulo{
  font-size: 13px;
  line-height: 1.25;
}

.admin-table td.col-eje{
  font-size: 11px;
  white-space: nowrap;
}

.admin-table thead th{
  font-size: 10px;
  letter-spacing: .3px;
}

/* =========================
   AJUSTES FINOS (pisan lo anterior)
========================= */

/* 1) Agrandar títulos del header */
.admin-table thead th,
.card-samer thead th{
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* 2) Aceptado: centrar y separar un poco de Estado */
.admin-table th.col-aceptado,
.admin-table td.col-aceptado{
  text-align: center !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.admin-table td.col-aceptado .badge-status{
  min-width: 48px;
  justify-content: center;
}

/* 3) Estados: que NO parezcan botón (sin recuadro) */
.admin-table td.col-estado .badge-status{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 900;
}

/* Puntito de color antes del texto (ENVIADO/BORRADOR/MODIF) */
.admin-table td.col-estado .badge-status::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
  transform: translateY(1px);
  background: currentColor;
  opacity: .9;
}

/* Mantener colores de texto que ya tenés */
.admin-table td.col-estado .badge-status--sent{ color: #0b6 !important; }
.admin-table td.col-estado .badge-status--draft{ color: var(--samer-primary) !important; }
.admin-table td.col-estado .badge-status--mod{ color: #b45f06 !important; }

/* 4) SI/NO con hover (botón de toggle_accept.php) */
.admin-table td.col-aceptado form button.badge-status{
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease;
}

.admin-table td.col-aceptado form button.badge-status:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* Extra: un foco visible si navegan con teclado */
.admin-table td.col-aceptado form button.badge-status:focus{
  outline: 2px solid rgba(22,63,135,.35);
  outline-offset: 2px;
}
.samer-btn i {
  margin-right: 12px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* =========================
   FIX columna BORRAR (admin)
========================= */
.admin-table th.col-borrar,
.admin-table td.col-borrar{
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 11% !important;      /* te quedaba libre aprox 11% */
  text-align: center !important;
  white-space: nowrap !important;
}

/* Ajuste fino: que no se pase de 100% si algún navegador se pone quisquilloso */
.admin-table .col-titulo,
.admin-table th.col-titulo{ width: 55% !important; } /* antes 52% */
.admin-table .col-eje,
.admin-table th.col-eje{ width: 15% !important; }
.admin-table .col-estado,
.admin-table th.col-estado{ width: 14% !important; }
.admin-table .col-aceptado,
.admin-table th.col-aceptado{ width: 6% !important; } /* antes 4% */
.admin-table .col-accion,
.admin-table th.col-accion{ width: 2% !important; }
 

/* === ID column + Aceptado width fix === */
.admin-table .col-id,
.admin-table th.col-id{
  width: 6% !important;
  text-align: center;
  font-weight: 900;
}

.admin-table .col-aceptado,
.admin-table th.col-aceptado{
  width: 10% !important; /* permite ver 'Pendiente / SI / NO' completos */
}