/* ===================================================
Variables Globales de Colores
=================================================== */
:root {
  --color-cobalto: #1A6894;
  --color-alerta: #a88003;
  --color-exito: #00A86B;
  --color-granate: #800000;
  --color-eliminar: #BC2C46;
  --color-eliminar-hover: #691928;
  --color-registrar-hover: #124664;
  --color-contraste-primario: #EAE8E2;
  --color-texto-primario: #232523;
  --color-fondo: #ffffff;
  --color-superficie-two: #ccc;
  --beige: #dadacd;
}

/* ===================================================
 Estilos para Inputs y Selects
=================================================== */
.input-estilo {
  width: 100%;
/*  
  font-size: 13px;
  background-color: #f1f1f1;
  color: var(--color-texto-primario);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;
  text-transform: uppercase; /* Fuerza el texto en mayúsculas */

  border: 1px solid #d1d5db; /* equivalente a border-gray-300 */
  border-radius: 0.375rem; /* rounded-md */
 padding: 12px 14px; /* py-1 px-3 */
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.text-area-estilo{
    border: 1px solid #d1d5db; /* equivalente a border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 12px 14px; /* py-1 px-3 */
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
    resize: none;
    width: 100%;
    height: 100px;
}

.text-area-estilo:focus {

    background-color: white;
    border-color: var(--color-contraste-primario);
    box-shadow: 0 0 0 2px rgba(35, 37, 35, 0.1);
}
.input-estilo::placeholder {
  color: var(--color-superficie-two);
}

.input-estilo:hover,
.select-estilo:hover {
  border-color: var(--color-contraste-primario);
}

.input-estilo:focus,
.select-estilo:focus {
  background-color: white;
  border-color: var(--color-contraste-primario);
  box-shadow: 0 0 0 2px rgba(35, 37, 35, 0.1);
}

.select-estilo {
  width: 100%;
 /* 
  font-size: 13px;
  background-color: #f1f1f1;
  color: var(--color-texto-primario);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;*/
  border: 1px solid #d1d5db; /* equivalente a border-gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 14px 16px;
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* ===================================================
Estilos para Botones
=================================================== */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.btn:active {
  transform: scale(0.97);
}

.btn-cobalto {
  background-color: var(--color-cobalto);
  color: var(--color-fondo);
}

.btn-editar {
  background-color: var(--color-alerta);
  color: var(--color-fondo);
}

.btn-editar:hover {
  background-color: var(--color-alerta);
}

.btn-eliminar {
  background-color: var(--color-eliminar);
  color: var(--color-contraste-primario);
}

.btn-eliminar:hover {
  background-color: var(--color-eliminar-hover);
}

.btn-registrar {
  background-color: var(--color-cobalto);
  color: var(--color-contraste-primario);
}

.btn-registrar:hover {
  background-color: var(--color-registrar-hover);
}

/* ===================================================
 Estilos para Labels (Estados)
=================================================== */
.label-success {
  color: white;
  background-color: var(--color-exito);
  text-transform: lowercase;
  font-weight: bold;
  padding: 6px 9px;
}

.label-warning {
  color: white;
  background-color: var(--color-alerta);
  text-transform: lowercase;
  font-weight: bold;
 padding: 6px 9px;
}

.label-delete {
  color: white;
  background-color: var(--color-eliminar);
  text-transform: lowercase;
  font-weight: bold;
  padding: 6px 9px;
}

/* ===================================================
Estilos de Texto y Fondo
=================================================== */
.text-color-primario {
  color: var( --color-texto-primario);
}

.bg-color-primario {
  background-color: var(--color-cobalto);
}

.bg-exito {
  background-color: var(--color-exito);
}

.bg-granate {
  background-color: var(--color-granate);
}