/* ====== Base ====== */
:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --brand:#5587a2;         /* azul principal histórico */
  --brand-2:#95d5e2;       /* azules secundarios heredados */
  --ok:#8ab14d;
  --warn:#ef562c;
  --mag:#cf3076;
  --slate:#302f2e;
  --line:#e5e7eb;
  --shadow:0 2px 10px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Tahoma, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.3px;
}

/* Enlaces */
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ====== Cabeceras y contenedores comunes ====== */
h1, h2, h3{
  margin: 0 0 10px 0;
  color: var(--ink);
  letter-spacing:.5px;
}

.container,
div[style*="max-width:1400px"]{         /* aplica a tus contenedores inline */
  width:90%;
  max-width:1400px;
  margin: 20px auto;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

/* Logo (portada/menu) */
img[src*="logo.png"]{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #ddd;
  box-shadow: var(--shadow);
}

/* Botón “volver” (imagen) */
img[src$="volver.png"]{
  width:56px;
  vertical-align:middle;
  margin-right: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* ====== Portada: “cuadros” → tarjetas-píldora ====== */
.linea{
  width:100%;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 8px 0 16px 0;
}

.cuadro{
  /* se respetan tus colores inline si los usas */
  min-width: 180px;
  flex: 1 1 240px;
  min-height: 74px;
  background: var(--brand);
  color: #fff;
  border-radius: 14px;
  padding: 16px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  letter-spacing:.6px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cuadro:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  filter: saturate(1.05);
}

/* Ajustes tipográficos dentro de “cuadro” cuando hay <br> */
.cuadro br{ line-height: 1.4; }

/* ====== Tablas (proveedores.aspx) ====== */
table{
  width:100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;             /* para redondeo */
  box-shadow: var(--shadow);
}

th, td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

thead th,
td[style*="background-color:#5587a2"],
td[style*="#5587a2"]{
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700;
}

tbody tr:nth-child(even){ background:#fafbfc; }
tbody tr:hover{ background:#f3f7fb; }

/* Iconos de acción (modificar/eliminar) */
td img[src$="modificar.png"],
td img[src$="eliminar.png"],
a img[style*="width:60px"]{
  width:40px !important;
  margin: 0 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
  transition: transform .1s ease;
}
td a:hover img{ transform: scale(1.06); }

/* Mensaje de confirmación (bloque rojo existente) */
div[style*="#f095a2"]{
  border: 1px solid #ef4444 !important;
  background: #ffe3e3 !important;
  color: #7f1d1d;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
div[style*="#f095a2"] b{ color:#7f1d1d; }

/* Botones “Si / No” dentro del confirm */
div[style*="#f095a2"] div[style*="border:solid 1px gray"]{
  border-radius: 10px;
  background:#fff;
  padding: 10px 16px !important;
  margin: 10px;
  box-shadow: var(--shadow);
  transition: transform .1s ease, background .1s;
}
div[style*="#f095a2"] a:hover div{ transform: translateY(-1px); background:#f8fafc; }

/* ====== Formularios (editarproveeodres.aspx) ====== */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
.cuadro_texto{
  width: 420px !important;
  max-width: 100%;
  padding: 12px 14px !important;
  font-size: 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
textarea{ min-height: 140px; resize: vertical; }

input:focus, textarea:focus, .cuadro_texto:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(85,135,162,.15);
}

/* Botón guardar */
.cuadro_boton,
input[type="submit"],
button,
asp\:button.cuadro_boton{
  display:inline-block;
  padding: 12px 18px !important;
  font-size: 16px !important;
  font-weight: 700;
  color: #fff !important;
  background: var(--brand) !important;
  border: 0 !important;
  border-radius: 12px !important;
  cursor: pointer;
  box-shadow: var(--shadow);
  letter-spacing:.5px;
  transition: transform .1s ease, box-shadow .12s ease, filter .12s ease;
}
.cuadro_boton:hover,
input[type="submit"]:hover,
button:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Etiquetas de campo */
label, .field-label{
  display:block;
  font-weight:700;
  margin: 12px 0 6px 0;
  color: var(--muted);
  letter-spacing:.4px;
}

/* Layout de edición: dos columnas en desktop */
@media (min-width: 860px){
  .edit-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
    align-items: start;
  }
}

/* ====== Panel “totales” fijo en portada ====== */
div[style*="position:fixed"][style*="right:0"]{
  right: 8px !important;
  top: 180px !important;
  background: #ffffff;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  padding: 10px 12px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow);
  color: var(--ink);
}
div[style*="position:fixed"] span{ font-weight: 800; }

/* ====== Utilidades ====== */
.mt-10{ margin-top:10px }
.mb-10{ margin-bottom:10px }
.hidden{ display:none !important }

/* ====== Responsivo fino ====== */
@media (max-width: 640px){
  .linea{ gap:10px }
  .cuadro{ flex:1 1 100%; min-height:64px; }
  img[src*="logo.png"]{ width:84px; height:84px; }
  table{ font-size:14px }
  th,td{ padding:8px }
}