/*==============================================================================
  ESTILOS “Editar Contacto” usando tus propias clases
==============================================================================*/

/* Contenedor exterior */
.single-contacto {
  background-color: #f4f6f8;
  padding: initial !important;
}

/* Card blanca centrada */
.single-contacto .contacto-card {
  max-width:     600px;
  margin:        0 auto;
  background:    #ffffff;
  border-radius: 12px;
  box-shadow:    0 4px 12px rgba(0,0,0,0.05);
  overflow:      hidden;
}

/* Cabecera oscura */
.single-contacto .contacto-card__header {
  background-color: #2f3e50;
  color:            #ffffff;
  padding:          1.5rem;
  text-align:       center;
  font-size:        1.5rem;
  border-bottom:    1px solid rgba(0,0,0,0.1);
}

/* Cuerpo con padding */
.single-contacto .contacto-card__body {
  padding:        2rem;
  background:     #ffffff;
}

/* Formulario ACF en columna única */
.single-contacto .editar-contacto__form-wrapper .acf-form {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.5rem;
}

/* Sin márgenes extra entre campos */
.single-contacto .acf-field {
  margin: 0;
}

/* Etiqueta arriba de cada campo */
.single-contacto .acf-label label {
  display:       block;
  margin-bottom: 0.5rem;
  font-weight:   600;
  color:         #333333;
}

/* Inputs, textarea y selects iguales */
.single-contacto .acf-input input,
.single-contacto .acf-input textarea,
.single-contacto .acf-input select {
  width:         100%;
  padding:       0.5rem 0.75rem;
  border:        1px solid #cccccc;
  border-radius: 4px;
  font-size:     1rem;
  font-family:   inherit;
}

/* Botón “Actualizar Contacto” centrado */
.single-contacto .acf-form .acf-form-submit {
  text-align: center;
  margin-top: 2rem;
}

/* Estilo del botón y hover */
.single-contacto .acf-form .acf-form-submit .acf-button {
  background-color: #4a4a4a;
  color:            #ffffff;
  padding:          0.75rem 1.5rem;
  border:           none;
  border-radius:    4px;
  font-size:        1rem;
  cursor:           pointer;
  transition:       background-color 0.2s ease;
}
.single-contacto .acf-form .acf-form-submit .acf-button:hover {
  background-color: #333333;
}
/* En css/dashboard.css */

.dashboard-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0;
}

.dashboard-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  flex: 1 1 300px;
  text-align: center;
  transition: transform 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.dashboard-card h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #1c1e21;
}

.dashboard-card p {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #333;
}

.dashboard-card a {
  color: #4c57ef;
  font-weight: 600;
  text-decoration: none;
}

.dashboard-card a:hover {
  text-decoration: underline;
}

.dashboard-actions h2 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #1c1e21;
}

.dashboard-actions a {
  color: #5b3cf0;
  font-weight: 600;
  text-decoration: none;
}

.dashboard-actions a:hover {
  text-decoration: underline;
}


/* 1) Asegúrate de usar la clase de body que genera GP para esta plantilla */
body.page-template-page-dashboard {
  /* nada aquí… */
}

/* 2) Convierto únicamente este layout en columna flexible y de altura mínima 100vh */
body.page-template-page-dashboard .site.grid-container.container.hfeed#page {
  display: flex;
  flex-direction: column;
  min-height: 74vh;
}

/* 3) El área del contenido (site-content) crecerá y empujará el footer hacia abajo */
body.page-template-page-dashboard .site-content {
  flex: 1;
  /* opcional: quita cualquier padding-top extraño */
  padding-top: 0;
}

/* 4) Ahora tus estilos "normales" de dashboard */
body.page-template-page-dashboard .dashboard-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 16px;
}
body.page-template-page-dashboard .dashboard-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
body.page-template-page-dashboard .dashboard-cards .card {
  flex: 1 1 calc(33.333% - 16px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 24px;
  text-align: center;
}
/* …y el resto de estilos responsive, acciones rápidas, etc… */


/* 0) Fuerza que el contenedor de GP vuelva a display:block solo aquí */
body.page-template-page-dashboard #content,
body.page-template-page-dashboard .site-content {
  display: block !important;
  padding-top: 0 !important;
  background: #f5f6fa;
}

/* 1) Ajustes generales */
body.page-template-page-dashboard .dashboard-page {
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 40px 16px;
}

/* 2) Tarjetas */
body.page-template-page-dashboard .dashboard-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
  justify-content: space-between;
}
body.page-template-page-dashboard .dashboard-cards .card {
  flex: 1 1 calc(33.333% - 16px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 24px;
  text-align: center;
}
body.page-template-page-dashboard .dashboard-cards .card h2 {
  margin-bottom: 12px;
  color: #2d3a49;
  font-size: 1.25rem;
}
body.page-template-page-dashboard .dashboard-cards .card p {
  margin-bottom: 16px;
  font-size: 1.5rem;
  color: #333;
}
body.page-template-page-dashboard .dashboard-cards .card a {
  color: #0066cc;
  font-weight: 600;
  text-decoration: none;
}

/* 3) Separador */
body.page-template-page-dashboard .dashboard-page hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 40px 0;
}

/* 4) Acciones rápidas */
body.page-template-page-dashboard .dashboard-actions h2 {
  margin-bottom: 16px;
  color: #2d3a49;
  font-size: 1.25rem;
}
body.page-template-page-dashboard .dashboard-actions a {
  color: #0066cc;
  font-weight: 600;
  text-decoration: none;
}

/* 5) Responsive */
@media (max-width: 768px) {
  body.page-template-page-dashboard .dashboard-cards .card {
    flex: 1 1 100%;
  }
}






/* CONTACTOS */


/*==============================================================================
  OVERRIDES GENERALES PARA LAS PÁGINAS CRUD (Nuevo Cliente y Nuevo Contacto)
==============================================================================*/

/* 1) Anular el grid-container de GeneratePress */
body.page-template-page-nuevo-cliente .site.grid-container.container.hfeed,
body.page-template-page-nuevo-contacto .site.grid-container.container.hfeed {
  display: block !important;
  max-width: 900px  !important;
  margin: 4rem auto !important;
  padding: 0        !important;
}

/* 2) Quitar el display:flex de #content */
body.page-template-page-nuevo-cliente #content.site-content,
body.page-template-page-nuevo-contacto #content.site-content {
  display: block !important;
  flex:    none  !important;
  padding: 0     !important;
}

/*==============================================================================
  ESTILOS COMUNES PARA EL CARD CRUD
==============================================================================*/

/* Contenedor principal (tanto en Nuevo Cliente como en Nuevo Contacto) */
.single-crud .cliente-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:       0 4px 12px rgba(0, 0, 0, 0.05);
  overflow:         hidden;
}

/* Cabecera oscura con texto centrado */
.single-crud .cliente-card__header {
  background-color: #2f3e50;
  color:            #ffffff;
  padding:          1.5rem;
  text-align:       center;
  font-size:        1.5rem;
  border-bottom:    1px solid rgba(0, 0, 0, 0.1);
}

/* Fondo gris suave alrededor del card */
.single-crud {
  background-color: #f4f6f8;
  padding:          2rem 1rem;
}

/* Cuerpo: grid de 3 columnas en todas las páginas CRUD */
.single-crud .cliente-card__body .acf-form {

  gap:                  2rem;
  padding:              2rem;
  background-color:     #ffffff;
}

/* Campos ACF sin márgenes extra */
.single-crud .cliente-card__body .acf-field {
  margin: 0;
}

/* Etiquetas estilo “label arriba” */
.single-crud .cliente-card__body .acf-label label {
  display:      block;
  margin-bottom: 0.5rem;
  font-weight:   600;
  color:         #333333;
}

/* Inputs, textarea y selects uniformes */
.single-crud .cliente-card__body .acf-input input,
.single-crud .cliente-card__body .acf-input textarea,
.single-crud .cliente-card__body .acf-input select {
  width:         100%;
  padding:       0.5rem 0.75rem;
  border:        1px solid #cccccc;
  border-radius: 4px;
  font-size:     1rem;
  font-family:   inherit;
}

/* Botón centrado */
.single-crud .acf-form .acf-form-submit {
  text-align:  center;
  margin-top:  2rem;
}

/* Botón “Guardar” idéntico en ambas páginas */
.single-crud .acf-form .acf-form-submit .acf-button {
  background-color: #4a4a4a;
  color:            #ffffff;
  padding:          0.75rem 1.5rem;
  border:           none;
  border-radius:    4px;
  font-size:        1rem;
  cursor:           pointer;
  transition:       background-color 0.2s ease;
}
.single-crud .acf-form .acf-form-submit .acf-button:hover {
  background-color: #333333;
}






/*==============================================================================
  ESTILOS “Editar Contacto” usando tus propias clases
==============================================================================*/

/* Quita el display:flex solo en page-editar-contacto.php */

  .site-content {
  display: block !important;
}

/* Contenedor exterior */
.single-contacto {
  background-color: #f4f6f8;
  padding:          4rem 1rem;
}

/* Card blanca centrada */
.single-contacto .contacto-card {
  max-width:     600px;
  margin:        0 auto;
  background:    #ffffff;
  border-radius: 12px;
  box-shadow:    0 4px 12px rgba(0,0,0,0.05);
  overflow:      hidden;
}

/* Cabecera oscura */
.single-contacto .contacto-card__header {
  background-color: #2f3e50;
  color:            #ffffff;
  padding:          1.5rem;
  text-align:       center;
  font-size:        1.5rem;
  border-bottom:    1px solid rgba(0,0,0,0.1);
}

/* Cuerpo con padding */
.single-contacto .contacto-card__body {
  padding:        2rem;
  background:     #ffffff;
}

/* Formulario ACF en columna única */
.single-contacto .editar-contacto__form-wrapper .acf-form {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.5rem;
}

/* Sin márgenes extra entre campos */
.single-contacto .acf-field {
  margin: 0;
}

/* Etiqueta arriba de cada campo */
.single-contacto .acf-label label {
  display:       block;
  margin-bottom: 0.5rem;
  font-weight:   600;
  color:         #333333;
}

/* Inputs, textarea y selects iguales */
.single-contacto .acf-input input,
.single-contacto .acf-input textarea,
.single-contacto .acf-input select {
  width:         100%;
  padding:       0.5rem 0.75rem;
  border:        1px solid #cccccc;
  border-radius: 4px;
  font-size:     1rem;
  font-family:   inherit;
}

/* Botón “Actualizar Contacto” centrado */
.single-contacto .acf-form .acf-form-submit {
  text-align: center;
  margin-top: 2rem;
}

/* Estilo del botón y hover */
.single-contacto .acf-form .acf-form-submit .acf-button {
  background-color: #4a4a4a;
  color:            #ffffff;
  padding:          0.75rem 1.5rem;
  border:           none;
  border-radius:    4px;
  font-size:        1rem;
  cursor:           pointer;
  transition:       background-color 0.2s ease;
}
.single-contacto .acf-form .acf-form-submit .acf-button:hover {
  background-color: #333333;
}